全选反选案例
需求：当选中全选按钮时，其他的复选框也会被选中，选中的时候"全选"文本变为"取消";反之，当其他所有复选框选中的时候，全选复选框也会被选中，选中的时候"全选"文本变为"取消"。
html部分：
<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>
js部分
<script>
// 获取全选按钮
let checkAll = document.querySelector('#checkAll')
// 获取全选的文本
let all = document.querySelector('.all')
// 获取所有的input复选框
let cks = document.querySelectorAll('.ck')
// console.log(checkAll, all, ck); //打印查看是否获取到元素
// 给全选按钮绑定单击事件
checkAll.addEventListener('click', function() {
// 获取全选按钮的状态
let state = checkAll.checked
// console.log(state);
cks.forEach(function(value, index) {
// 给每一个复选框赋值状态
value.checked = state
})
// 判断全选复选的状态，为真就改为‘取消’，为假就改为‘全选’
// if (state) {
// all.innerHTML = `取消`
// } else {
// all.innerHTML = `全选`
// }
// 用三元表达式更简便
all.innerHTML = state ? `取消` : `全选`
})
// 给cks每一个复选框添加单击事件
cks.forEach(function(value, index) {
value.addEventListener('click', function() {
// 定义一个初始布尔值变量
let flag = true
// 只要其中一个复选框没有选择，那么全选框的值就是false
cks.forEach(function(value, index) {
if (value.checked == false) {
flag = false
}
})
//最后给全选的复选框赋值
checkAll.checked = flag
all.innerHTML = flag ? `取消` : `全选`
})
})
</script>
