<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>全选和取消全选</title>
</head>
<body>
<h2>管理员列表</h2>
<table border="1px" width="500px">
<thead>
<tr>
<th><input type="checkbox"/>全选</th>
<th>管理员ID</th>
<th>姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>Tester</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>Manager</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>Analyst</td>
<td>修改 删除</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4</td>
<td>Admin</td>
<td>修改 删除</td>
</tr>
</tbody>
</table>
<button>删除选定</button>
<script>
//匿名函数自调——避免全局污染 chbAll和chbs 会自动形成闭包（变量不会释放，可以重复使用）
(function(){
//1、查找 触发事件的元素 table—— thead—— tr—— 第一个th—— input
var chball=document.querySelector("table>thead>tr>th:first-child>input");//选择器查找
var chbs=document.querySelectorAll("table>tbody>tr>td:first-child>input");
//2、绑定 触发事件函数
chball.onclick=function(){//不用this。chball只有一个
//3、查找要修改的元素 chbs 前面找过不用再找了，直接使用
//4、修改元素
for(var chb of chbs){
//遍历每个chb的 状态，选中或是没选===chball
chb.checked=chball.checked;
}
}
//以上实现功能：点击全选下面的选项框也全部选中，或取消
//以下要实现的功能：
//1、下面四个选项框有一个没选中，全选就不会选中
//2、下面四个选项框全部选中，全选也选中
//1、查找 触发事件的元素。上面找过就不用再找了
//2、绑定 触发事件函数
//有多个选项框：遍历
for(var chb of chbs){
//每遍历一个chb，就绑定单击事件函数
chb.onclick=function(){
var chb=this;//有多个chb，指定当前元素
//3、查找要修改的元素 chbAll 同上找过了直接用
//4、修改元素：
//若当前有任何一个chb未选中，那chball一定不选中
if(chb.checked==false){
chball.checked=false;
}else{//否则
//chb全部选中=chnall全选。换个角度：
//若没找到未选中的，那就是全部选中了
//先找到tbody中tr下第一个td中未选中的input。前面找到的是选中的input，不能直接用。
var unchecked=document.querySelector("tbody>tr>td:first-child>input:not(:checked)");//否定伪类选择器
if(unchecked==null)
chball.checked=true;
}
}
}
})()
</script>
</body>
</html>
