<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border>
<tr>
<th><input type="checkbox" class="checkbox">全选</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
<tr>
<td><input type="checkbox" class="ck"></td>
<td>小米手机</td>
<td>小米</td>
<td>$5999</td>
</tr>
<tr>
<td><input type="checkbox" class="ck"></td>
<td>小米手机</td>
<td>小米</td>
<td>$5999</td>
</tr>
<tr>
<td><input type="checkbox" class="ck"></td>
<td>小米手机</td>
<td>小米</td>
<td>$5999</td>
</tr>
</table>
<script>
//获取全选框
const checkbox = document.querySelector(".checkbox")
//检查是否获取成功
console.log(checkbox)
//获取所有的多选框
const cks = document.querySelectorAll(".ck")
//检查是否获取成功
console.log(cks)
//1. 循环所有的多选框
for(let i=0;i<cks.length;i++){
//给全选框添加点击事件
checkbox.addEventListener('click',function(){
//表示，全选框的状态等于所有多选框的状态，当点击全选框的时候，全选框的状态是为true,只有为true的情况下，才会被选中
cks[i].checked = checkbox.checked
})
}
//以下是用来判断，当所有全选框都被选中时，全选框才为true
for(let i=0;i<cks.length;i++){
//给所有的多选框添加点击事件
cks[i].addEventListener('click',function(){
// .ck:checked 选择框的伪类选择器 => 在这里表示被选中
//方法一: checkbox.checked = document.querySelectorAll(".ck:checked").length === cks.length
//当选中多选框的数量等于原本多选框有多少个数量时执行下一步
//方法二：
if (document.querySelectorAll(".ck:checked").length === cks.length){
checkbox.checked = true
}else{
checkbox.checked =false
}
})
}
</script>
</body>
</html>