Checkbox复选框实现全选和全不选功能
作者：互联网
代码直接放在HTML页面即可运行，不理解的地方可以查看注释或评论区交流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS实现复选框全选和全不选</title>
<script type="text/javascript">
window.onload = function() {
// 通过ID获取到全选按钮
var checkAll = document.getElementById("checkAll");
// 获取到name属性为"hobby"的所有按钮
var hobby = document.getElementsByName("hobby");
// 点击按钮进行全选和全不选
checkAll.onclick = function() {
for (var i = 0; i < hobby.length; i++) {
/* 根据全选按钮属性为true/false时
同时将属性值赋值给每一个"hobby"按钮 */
hobby[i].checked = checkAll.checked;
}
}
/*当所有其他选项都被选中时，全选按钮才是选中状态*/
// 获取name属性为"hobby"按钮的数量
var length = hobby.length;
// 页面加载完成后此循环用来获取每一个"hobby"按钮
for (var i = 0; i < length; i++) {
// 当"hobby"按钮触发点击时间时执行以下函数
hobby[i].onclick = function() {
// 定义一个计数变量
var count = 0;
// 点击事件触发后执行此循环
for (var i = 0; i < length; i++) {
// 如果有一个"hobby"复选框被选中，count计数加一
if (hobby[i].checked == true) {
count++;
}
}
/* 当"hobby"复选框被选中数量和"hobby"复选框总数量相同时，
将返回的值true赋值给全选按钮，反之亦然 */
checkAll.checked = (count == length);
}
}
}
</script>
</head>
<body>
<input type="checkbox" name="hobby" id="smoke" />抽烟<br />
<input type="checkbox" name="hobby" id="drink" />喝酒<br />
<input type="checkbox" name="hobby" id="perm" />烫头
<hr />
<input type="checkbox" name="checkAll" id="checkAll" />全选<br />
</body>
</html>
运行结果：
标签：checkAll,Checkbox,复选框,length,全选,按钮,var,hobby 来源： https://www.cnblogs.com/xiqingbo/p/front-end-02.html