选中 JavaScript 中的所有复选框
本文将演示使用 JavaScript 选择所有复选框。
创建一个函数来选择 JavaScript 中的所有复选框
要选择页面上的所有复选框，我们必须首先开发一个函数来一次选择所有复选框。在本节中，我们不仅将学习如何选择所有复选框，还将创建一个函数来取消选择所有选中的复选框。
那么，让我们看看如何使用 JavaScript 来选中和取消选中所有复选框。
我们将通过一个示例来设计两个按钮，一个用于选择所有复选框，另一个用于取消选择所有复选框。
例子：
<html>
<head>
<title>Selecting or deselecting all CheckBoxes</title>
<script type="text/javascript">
function selects(){
var selec=document.getElementsByName('ck');
for(var i=0; i<selec.length; i++){
if(selec[i].type=='checkbox')
selec[i].checked=true;
}
}
function deSelect(){
var selec=document.getElementsByName('ck');
for(var i=0; i<selec.length; i++){
if(selec[i].type=='checkbox')
selec[i].checked=false;
}
}
</script>
</head>
<body>
<h3>Select or Deselect all or some checkboxes as per your favourite fruit:</h3>
<input type="checkbox" name="ck" value="Apple">Apple<br>
<input type="checkbox" name="ck" value="Banana">Banana<br>
<input type="checkbox" name="ck" value="orange">orange<br>
<input type="checkbox" name="ck" value="Pineapple">Pineapple<br>
<br>
<input type="button" onclick='selects()' value="Select All"/>
<input type="button" onclick='deSelect()' value="Deselect All"/>
</body>
</html>
在这里，你还可以运行代码。
HTML 和 JavaScript 用于创建上面的整个代码。我们在 HTML 正文部分生成了四种输入类型作为复选框和另外两种输入类型作为按钮。
我们为输入类型生成了两个按钮作为按钮：一个用于选择复选框，这将激活 selects() 方法，另一个用于取消选择复选框（如果有/全部），它将调用 deSelect() 功能。
输出：
点击全选按钮后，
当用户单击全选按钮时，他们将被带到脚本区域，在该区域可以找到 selects() 函数，并执行其语句。
点击取消全选按钮后，
当用户选中复选框并单击取消全选按钮时，将调用 deSelect() 函数。如果用户只选择了一个或两个复选框，单击取消全选按钮也会取消选择这些复选框。
如果用户在单击取消全选按钮之前没有选择任何复选框，则不会显示或执行任何操作。
用户可以生成各种复选框示例并测试该功能。然后用户可以以这种方式选择或取消选择所有复选框。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
用 jQuery 检查复选框是否被选中
发布时间：2024/03/24 浏览次数：102 分类：JavaScript
-
在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的
jQuery 中的 Window.onload 与 $(document).ready
发布时间：2024/03/24 浏览次数：180 分类：JavaScript
-
本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。
