需求：
1.点击上面全选复选框，下面所有的复选框都选中(全选)
2.再次点击全选复选框，下面所有的复选框取消全选
3.如果下面复选框全部选中，上面全选按钮自动选中
4.如果下面复选框有一个没有选中，上面全选按钮就不选中
5.所有复选框一开始默认都没有选中状态
分析：
1.全选和取消全选做法：让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
2.下面复选框需要全部选中，上面全选才能选中的做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否存在没有选中的，如果有一个没有选中的，上面全选就不选中。
3.可以设置一个变量，来控制全选是否选中
思路：
1.外层for循环是给每一个复选框遍历绑定点击事件
2.内层for循环是遍历每一个表体复选框，查看其是否选中，
3.如果存在没有选中的，值为flag = false。如果全部都选中，则不执行下面的if判断，flag永远是true，
4.让表头全选复选框的值等于flag
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<!-- 这是全选按钮 -->
<input type="checkbox" id="j_cbAll" />
</th>
<th>商品</th>
<th>价钱</th>
</tr>
</thead>
<!-- tbody里面装的就是所有下面的复选框 -->
<tbody id="j_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>iPad Air</td>
<td>2000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Apple Watch</td>
<td>2000</td>
</tr>
</tbody>
</table>
</div>
<script>
//全选和取消全选的做法：让下面所有的复选框的checked属性(选中状态)跟随全选按钮即可
//1.获取元素
//这是表头的全选按钮
var j_cbAll = document.getElementById('j_cbAll');
//这是表体中所有的复选框
var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
//2.绑定事件
//在表头的input复选框中写入checked='checked'就选中了
j_cbAll.onclick = function() {
for (var i = 0; i < j_tbs.length; i++) {
//this.checked 它可以得到当前复选框的选中状态，吐过是true，就是选中，如果是false，就是未选中
//console.log(this.checked);
//如果选中了表头复选框，就让表体中的所有复选框都选中
j_tbs[i].checked = this.checked;
}
}
//2.下面复选按钮需要全部选中，上面复选框才能选中：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否存在没有选中的，如果有一个没有选中的，上面全选就不选中。
for (var i = 0; i < j_tbs.length; i++) {
j_tbs[i].onclick = function() {
//这个flag是控制全选复选框是否选中的
var flag = true;
//每次点击下面的复选框都要循环查看所有的复选框是否全部选中
//这个for是在一个函数里面，变量都是i，但是作用域不同，所以不会互相影响
for (var i = 0; i < j_tbs.length; i++) {
//给j_tbs取反意思是当checked没有选中，就给全选复选框值为false
//但是把下面的全部选完了，上面全选复选框也不会选中，因此在上面声明一个flag，让其控制全选按钮是否选中
//如果有一个没有选中，就把flag值改成false
if (!j_tbs[i].checked) {
flag = false;
//退出for循环，不写也没问题，不会出错，写的目的在于只要出现一个不符合条件的就退出，没有必要全部复选框进行循环，可以提高执行效率
break;
}
}
//让全选复选框的值等于flag
j_cbAll.checked = flag;
}
}
</script>
image.png
