a、点击全选按钮,所有的checkbox选中,再次点击,所有的checkbox不选中
b、点击单个checkbox,当都选中时,全选要选中,当某一个没有选中时,全选不选中
效果图及代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>全选</title>
</head>
<body>
<input type="checkbox" id="all"> <label id="qq" for="all">全选</label>
<hr>
<input type="checkbox"> <input type="checkbox">
<input type="checkbox"> <input type="checkbox">
<input type="checkbox"> <input type="checkbox">
<input type="checkbox"> <input type="checkbox">
<input type="checkbox"> <input type="checkbox">
<input type="checkbox"> <input type="checkbox">
<script>
var checkbox = document.getElementsByTagName("input");
var qq = document.getElementById("qq");
checkbox[0].tag = true;
checkbox[0].onclick = function a1() {
if (checkbox[0].tag) {
for (var i = 1; i < checkbox.length; i++) {
checkbox[i].checked = true;
checkbox[0].tag = false;
}
}
else {
for (var i = 1; i < checkbox.length; i++) {
checkbox[i].checked = false;
checkbox[0].tag = true;
}
}
}
var p;
for (var j = 1; j < checkbox.length; j++) {
checkbox[j].onclick = function () {
for (var i = 1; i < checkbox.length; i++) {
if (checkbox[i].checked == true) {
p = true;
}
else {
p = false;
break;
}
}
if (p == true) {
checkbox[0].checked = true;
}
else {
checkbox[0].checked = false;
}
}
}
</script>
</body>
</html>