依次选中下面所有的复选框后,选择全选的复选框自动选中
时间: 2023-12-06 07:44:15 浏览: 39
这是一个常见的全选/反选功能,可以通过以下步骤实现:
1. 给每个需要被全选/反选的复选框设置相同的 class 或 data 属性,例如 "checkbox"。
2. 给全选的复选框设置一个 onclick 事件,当它被点击时,遍历所有具有 "checkbox" class 或 data 属性的复选框,并将它们的状态设置为与全选框相同。
以下是一个示例代码:
```html
<input type="checkbox" id="checkAll"> 全选
<input type="checkbox" class="checkbox"> 复选框1
<input type="checkbox" class="checkbox"> 复选框2
<input type="checkbox" class="checkbox"> 复选框3
<script>
var checkAll = document.getElementById("checkAll");
var checkboxes = document.querySelectorAll(".checkbox");
checkAll.onclick = function() {
for (var i = 0; i < checkboxes.length; i++) {
checkboxes[i].checked = checkAll.checked;
}
};
</script>
```
当全选框被选中时,复选框1、2、3 也会被选中;当全选框被取消选中时,复选框1、2、3 也会取消选中。