选择所有复选框 HTML JS - JavaScript

在Web开发过程中，经常需要对页面上的多个复选框进行操作，包括选中、取消选中、获取选中的值等操作。本文将介绍如何使用HTML和JavaScript选择所有复选框。

HTML

在HTML中，复选框可以通过<input>标签来定义。<input>标签有一个类型属性type，可以设置为checkbox来表示复选框。定义复选框时，需要设置value属性来指定复选框的值。

<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange

上面的代码定义了三个名为fruit的复选框，分别表示苹果、香蕉和橙子。当用户选中复选框时，将会提交表单数据，其中fruit参数的值为选中的复选框的值，多个值用逗号分隔。

JavaScript

使用JavaScript选择所有复选框可以通过下面两种方法实现。

方法一：通过name属性选择所有复选框

在HTML中，多个复选框可以通过相同的name属性来进行分组。因此，可以通过document.getElementsByName()方法来选择相同name属性的所有复选框。

var checkboxes = document.getElementsByName('fruit');
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].checked = true; // 选中所有复选框
}

上面的代码选中了页面中所有name属性为fruit的复选框。

方法二：通过CSS选择器选择所有复选框

除了通过name属性来选择复选框外，还可以通过CSS选择器来选中复选框。可以使用document.querySelectorAll()方法来选中所有匹配选择器的元素。

var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].checked = true; // 选中所有复选框
}

上面的代码选中了页面中所有类型为checkbox的复选框。

结语

通过上述方法，可以方便地选择页面中的所有复选框并进行操作。无论是通过name属性还是通过CSS选择器，都可以达到同样的效果。根据具体的需求，选择合适的方法即可。