html +css+js实现多个复选框,第一个为全选复选框
时间: 2023-12-20 10:08:01 浏览: 106
js 实现 复选框全选(一)
好的,对于你的问题,我可以给你一些代码示例:
HTML:
```
<input type="checkbox" id="check-all">全选
<input type="checkbox" class="check-item">选项1
<input type="checkbox" class="check-item">选项2
<input type="checkbox" class="check-item">选项3
```
JS:
```
// 获取全选复选框和所有选项复选框
var checkAll = document.getElementById("check-all");
var checkItems = document.getElementsByClassName("check-item");
// 全选复选框的点击事件
checkAll.onclick = function() {
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].checked = this.checked;
}
};
// 选项复选框的点击事件
for (var i = 0; i < checkItems.length; i++) {
checkItems[i].onclick = function() {
var checkedCount = 0;
for (var j = 0; j < checkItems.length; j++) {
if (checkItems[j].checked) {
checkedCount++;
}
}
checkAll.checked = checkedCount === checkItems.length;
};
}
```
以上代码实现了一个包含全选复选框和多个选项复选框的多选框组件。当全选复选框被选中时,所有选项复选框都被选中;当选项复选框被选中时,全选复选框的状态根据选项复选框的选中状态动态改变。
阅读全文