html +css+js实现多个复选框多行展示,第一个为全选复选框
时间: 2023-12-20 08:08:01 浏览: 23
好的,对于你的问题,我可以给你一些代码示例:
HTML:
```
<div>
<input type="checkbox" id="check-all">全选
</div>
<div>
<input type="checkbox" class="check-item">选项1
<input type="checkbox" class="check-item">选项2
<input type="checkbox" class="check-item">选项3
</div>
<div>
<input type="checkbox" class="check-item">选项4
<input type="checkbox" class="check-item">选项5
<input type="checkbox" class="check-item">选项6
</div>
```
CSS:
```
/* 设置每行的宽度和高度 */
div {
width: 300px;
height: 30px;
}
/* 设置复选框的样式 */
input[type="checkbox"] {
display: inline-block;
margin-right: 10px;
}
```
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;
};
}
```
以上代码实现了一个包含全选复选框和多个选项复选框的多选框组件,并且每行显示多个选项。其中,HTML代码将每行选项放在一个div元素中,CSS代码设置了每行的宽度和高度,以及复选框的样式。JS代码和之前的示例代码基本相同,只是需要更改获取选项复选框的方式,具体可以参考以上代码示例。