思路：
1.获取元素
2.为全选按钮添加单击事件，实现全选全不选效果（1）声明一个变量，拿到全选框的选中状态，（2）遍历伪数组，让所有复选框的选中状态和全选框一样
3.获取当前被选中的复选框数量和复选框总数进行比较
（1）遍历所有复选框，为每个复选框添加单击事件
（2）利用:checked匹配到每个选中的输入元素，拿到被选中复选框的数量
（3）判断复选框被选中的数量与复选框总数是否相等
i.若相等，全选框的状态为选中状态
ii.若不相等，全选框的状态为未被选中状态
（4）最后渲染一下页面文字
<style>
* {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 500px;
margin: 100px auto;
text-align: center;
}
th {
background-color: #09c;
font: bold 16px '微软雅黑';
color: #fff;
height: 24px;
}
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
.allCheck {
width: 80px;
}
</style>
<body>
<table>
<tr>
<th class="allCheck">
<input type="checkbox" name="" id="checkAll" />
<span class="all">全选</span>
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米手机</td>
<td>小米</td>
<td>￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米净水器</td>
<td>小米</td>
<td>￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck" />
</td>
<td>小米电视</td>
<td>小米</td>
<td>￥5999</td>
</tr>
</table>
<script>
//获取元素
let checkAll = document.querySelector('#checkAll')
let cks = document.querySelectorAll('.ck')
let all = document.querySelector('.all')
// 为全选按钮添加单击事件 实现全选全不选效果
checkAll.addEventListener('click', function () {
// 拿到全选框的选中状态
let state = checkAll.checked
//遍历伪数组，让所有复选框的选中状态和全选框一致
cks.forEach(function (v, i) {
v.checked = state
})
})
//遍历所有复选框
cks.forEach(function (v, i) {
// 为每一个复选框添加单击事件
v.addEventListener('click', function () {
//实现方式就是获取当前被选中的 复选框的数量 与 复选框总数进行比较
let total = document.querySelectorAll('.ck:checked').length // :checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）
// 判断复选框的数量 与 复选框总数是否相等
if (cks.length == total) {
// 相等，全选框状态为选中
checkAll.checked = true
//渲染一下页面文字
all.innerText = '取消'
} else {
// 不相等，全选框状态为不选中
checkAll.checked = false
//渲染一下页面文字
all.innerText = '全选'
}
})
})
</script>
</body>
