直接上代码
<body>
<div>
<input type="checkbox" name="" id="">选项一
<input type="checkbox" name="" id="">选项二
<input type="checkbox" name="" id="">选项三
<input type="checkbox" name="" id="">选项四<br><br>
</div>
<input type="checkbox" name="" id="qx">全选
<script>
var qx = document.getElementById('qx')
var dx = document.getElementsByTagName('div')[0].querySelectorAll('input')
// 点击全选时
qx.onclick = function () {
//this.checked 它可以得到当前复选框的选中状态如果是true 就是选中，如果是false 就是未选中
for (var i = 0; i < dx.length; i++) {
dx[i].checked = this.checked;
}
}
// 单个点击时
for (var i = 0; i < dx.length; i++) {
dx[i].onclick = function () {
//flag控制全选按钮是否选中
var flag = true;
//每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
for (var i = 0; i < dx.length; i++) {
if (!dx[i].checked) {
flag = false;
break;//退出for循环 这样可以提高执行效率 因为只要有一个没有被选中，剩下的就无需循环了
}
}
qx.checked = flag;
}
}
</script>
</body>
该博客展示了如何使用纯JavaScript实现表单中全选和反选的功能。通过监听全选按钮的点击事件，可以批量改变所有复选框的状态。同时，当单个复选框被点击时，会更新全选按钮的选中状态，确保其与所有复选框状态一致。这是一个基础的前端交互实现案例。
扫一扫
1184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
