思路:
第一部分--全选和取消全选做法:
让下面所有的复选框的checked属性(选中状态)跟随全选按钮即可
第二部分--下面复选框需要全部选中,上面全选复选框才能选中:
利用for循环将每个复选框添加点击事件,接着使用一个小技巧(设置一个flag变量控制全选按钮是否选中。并为其赋值为true默认选中,因为checked的属性返回值为true和false)。再一次使用for循环,当每次点击下面的复选框时,都需要检查一下同类的复选框是否被全部选中。若有一个未被选中,执行if条件语句的内容将flag赋值为false.最后将flag的值赋值给全选按钮即可。
<!DOCTYPE html>
<html lang="en">
<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>
<style>
table {
margin: 100px auto;
width: 300px;
height: 200px;
}
thead tr {
background-color: aqua;
}
</style>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" id="box1" /></th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<tbody id="box2">
<tr>
<td><input type="checkbox" /></td>
<td>Ipad1</td>
<td>3333</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Ipad1</td>
<td>3333</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Ipad1</td>
<td>3333</td>
</tr>
</tbody>
</table>
<script>
/* 上面的一个总按钮影响下面的分个按钮 */
//获取元素
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2").getElementsByTagName("input");
//注册事件
box1.onclick = function() {
for (var i = 0; i < box2.length; i++) {
//this.checked可以得到当前复选框的选中状态,如果是true就是选中,否则就是未选中
box2[i].checked = this.checked;
}
};
/* 下面的分个按钮影响上面的总按钮 */
for (var i = 0; i < box2.length; i++) {
box2[i].onclick = function() {
//设置flag变量来控制全选按钮是否选中
var flag = true;
//每次点击下面的复选框都要循环检查4个复选框是否全被选中
for (var i = 0; i < box2.length; i++) {
if (!box2[i].checked) {
flag = false;
//若有一个未选中,则将flag赋值为false,否则就不执行if中的代码
}
}
box1.checked = flag;
};
}
</script>
</body>
</html>