遇到问题
本来的要求是全选后取消其中任何一项即可取消全选按钮,但是在取消一个选项后全选按钮并没有消失
附上代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<thead id="thead">
<tr>
<td>
<input type="checkbox" id="check1">
</td>
<td>角色</td>
<td>属性</td>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
<input type="checkbox" id="check2">
</td>
<td>樱之宫莓香</td>
<td>抖S</td>
</tr>
<tr>
<td>
<input type="checkbox" id="check2">
</td>
<td>日向夏帆</td>
<td>傲娇</td>
</tr>
<tr>
<td>
<input type="checkbox" id="check2">
</td>
<td>星川麻冬</td>
<td>妹妹</td>
</tr>
</tbody>
</table>
<script>
var check1 = document.getElementById("check1");
var tbody = document.getElementsByTagName("tbody");
var check2 = tbody[0].getElementsByTagName("input");
check1.onclick = function () {
if (check1.checked == true) {
for (i = 0; i <= 2; i++) {
check2[i].checked = true;
}
} else {
for (i = 0; i <= 2; i++) {
check2[i].checked = false;
}
}
}
for (i = 0; i <= 2; i++) {
check2[i].onclick = function () {
if (check2[i].checked == false) {
check1.checked = false;
}
}
}
</script>
<style>
#thead {
background-color: cyan;
}
input {
margin: 8px;
}
</style>
</body>
</html>
解决方案
问题原因是第63行,将check2[i].checked修改为this.checked即可
for (i = 0; i <= 2; i++) {
check2[i].onclick = function () {
if (this.checked == false) {
check1.checked = false;
}
}
}
问题原因
for为同步,onclick为异步。当onclick发生的时候,for循环已经结束,所以拿不到以i为参数的数据。
拓展
也可以使用如下方法进行改正
- 使用let对i进行赋值
- 使用闭包重写代码
相关知识点
作用域、this、闭包
类似问题:可点击此处查看其他人遇到类似问题时的解决方案