<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="all" />
</th>
<th>商品</th>
<th>价格</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>iphone8</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>ipad pro</td>
<td>5000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
<input type="button" value=" 反 选 " id="btn">
</div>
<script>
//获取元素
var all = document.getElementById("all");
var tb = document.getElementById("tb");
var btn = document.getElementById("btn");
var tb_inputs = tb.getElementsByTagName("input");
//1全选:让子选项的选择效果始终与全选保持一致
all.onclick = function () {
for(var i = 0; i < tb_inputs.length ; i++){
tb_inputs[i].checked = all.checked;
}
};
//2单独选择子选项过程
//给每一次点击任何一个子选项进行判断
for(var i = 0; i < tb_inputs.length; i++){
tb_inputs[i].onclick = function(){
//判断所有子选项是否为选中的状态，如果都选中，让全选被选中。有的没有被选中，全选取消选择。
//使用一个中间过渡变量，初始认为所有子选项都是被选中的。
var isAllChecked = true;
//遍历所有子选项，进行判断。
for(var j = 0; j < tb_inputs.length; j++){
//一旦有一个是没有被选择的，让变量变为false
if(tb_inputs[j].checked === false){
isAllChecked = false;
//不是全选，不需要往下执行
break;
}
}
//如果循环内部条件永远不成立，说明所有子选项都是被选中，isAllChecked 的值没有发生变化，还是true。
//给all元素设置checked属性
all.checked = isAllChecked;
}
}
//3反选
btn.onclick = function (){
//让所有子选项与之前的状态相反
for(var i = 0; i < tb_inputs.length; i++){
//让属性值取原来相反的值
tb_inputs[i].checked = !tb_inputs[i].checked;
}
//控制全选效果，也需要进行取反
var isAllChecked = true;
//遍历所有子选项，进行判断。
for(var j = 0; j < tb_inputs.length; j++){
//一旦有一个是没有被选择的，让变量变为false
if(tb_inputs[j].checked === false){
isAllChecked = false;
//不是全选，不需要往下执行
break;
}
}
//如果循环内部条件永远不成立，说明所有子选项都是被选中，isAllChecked 的值没有发生变化，还是true。
//给all元素设置checked属性
all.checked = isAllChecked;
};
</script>
</body>
</html>
