选中 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() 函数。如果用户只选择了一个或两个复选框，单击取消全选按钮也会取消选择这些复选框。
如果用户在单击取消全选按钮之前没有选择任何复选框，则不会显示或执行任何操作。
用户可以生成各种复选框示例并测试该功能。然后用户可以以这种方式选择或取消选择所有复选框。
相关文章
JavaScript 中的 Map 索引
发布时间：2024/03/20 浏览次数：197 分类：JavaScript
-
JavaScript map 方法很容易实现，我们将讨论它的不同参数，以及它们在不同场景中的使用方式。
JavaScript 中 let 和 var 的区别
发布时间：2024/03/20 浏览次数：79 分类：JavaScript
-
本教程描述了两个关键字 var 和 let 在 JavaScript 中的实际区别。
JavaScript 指针
发布时间：2024/03/20 浏览次数：166 分类：JavaScript
-
JavaScript 没有明确的方法来定义指针。它允许在对象之间传递值和引用，但不能显示引用。本文将介绍在 JavaScript 中定义指针的好方法。
JavaScript 元组示例
发布时间：2024/03/20 浏览次数：166 分类：JavaScript
-
在 JavaScript 语言中，元组是具有不可变特性的数组类型。我们可以使用单个变量访问元组，该变量是数组的一种。
使用 JavaScript 编码 HTML
发布时间：2024/03/20 浏览次数：83 分类：JavaScript
-
本教程将教你如何使用不同的方法对 HTML 字符串进行编码。这些方法的共同点是字符串替换，它替换了具有潜在危险的字符。
使用 JavaScript 加载外部 HTML 文件
发布时间：2024/03/20 浏览次数：133 分类：JavaScript
-
本文演示了如何使用 JavaScript 和 jQuery 加载外部 html 文件。
JavaScript 延迟后重定向页面
发布时间：2024/03/20 浏览次数：87 分类：JavaScript
-
本教程展示了如何使用 JavaScript 中的 setTimeout 方法在延迟后重定向页面。
