表格全选功能JavaScript实现深度解析
功能设计
全选/取消全选：表头的复选框控制所有商品复选框
联动反馈：单个商品勾选状态变化时，自动更新全选状态
视觉反馈：复选框状态变化直观可见
1. DOM元素获取
const checkAll = document.querySelector('#checkAll') // 获取全选复选框
const ck = document.querySelectorAll('.ck') // 获取所有商品复选框
使用querySelector和querySelectorAll精确获取需要操作的元素
#checkAll是ID选择器，.ck是类选择器
2. 全选/全不选功能实现
checkAll.addEventListener('click', function() {
for(let i = 0; i < ck.length; i++) {
ck[i].checked = this.checked // 将所有商品复选框状态设为与全选一致
}
})
设计思路：
监听全选复选框的点击事件
当全选状态变化时，遍历所有商品复选框
将每个商品复选框的checked属性设置为与全选复选框相同
this.checked指向全选复选框的当前状态（true/false）
关键点：
实现了全选（全选勾选 → 所有商品勾选）
实现了全不选（全选取消 → 所有商品取消）
使用for循环遍历，性能优于forEach（虽然差距微乎其微）
3. 单个选择联动全选状态
for(let i = 0; i < ck.length; i++) {
ck[i].addEventListener('click', function() {
// 当所有商品都被选中时，全选复选框也选中
checkAll.checked = document.querySelectorAll('.ck:checked').length === ck.length
})
}
设计思路：
为每个商品复选框绑定点击事件
每次点击后检查所有商品的选中状态
使用CSS选择器.ck:checked直接获取所有已选中的商品
比较选中数量与总数量，决定全选复选框的状态
关键点：
document.querySelectorAll('.ck:checked') - 巧妙利用CSS选择器筛选已选中的元素
长度比较 === - 严格相等判断，返回布尔值直接赋值给checkAll.checked
实现了：所有商品选中 → 全选自动勾选；任一商品取消 → 全选自动取消
4. 代码的精妙之处
4.1 状态同步的简洁实现
// 这行代码极其精炼
checkAll.checked = document.querySelectorAll('.ck:checked').length === ck.length
右侧表达式直接返回布尔值（true/false）
无需if判断，无需三元运算符
一行代码完成检查、判断、赋值三个操作
4.2 避免了常见陷阱
// 错误写法（会产生bug）
checkAll.checked = document.querySelectorAll('.ck:checked').length == ck.length
// 正确写法
checkAll.checked = document.querySelectorAll('.ck:checked').length === ck.length
使用===严格相等，避免类型转换带来的意外结果
5. 执行流程分析
// 初始化
checkAll(未勾选) + 三个商品(未勾选)
// 场景1：点击全选
1. 触发全选click事件
2. 循环遍历所有商品，设置checked = true
3. 所有商品变为勾选状态
// 场景2：点击全选取消
1. 触发全选click事件
2. 循环遍历所有商品，设置checked = false
3. 所有商品变为未勾选状态
// 场景3：手动勾选所有商品
1. 依次点击三个商品
2. 每个商品click事件中计算: 选中数量(3) === 总数量(3) → true
3. 全选复选框自动变为勾选
// 场景4：手动取消任一商品
1. 点击某个已勾选商品
2. 计算: 选中数量(2) === 总数量(3) → false
3. 全选复选框自动变为未勾选
完整代码：
<!-- <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小米商品表格</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f0f2f5;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
table {
width: 650px;
background: white;
border-radius: 16px;
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
border-collapse: collapse;
overflow: hidden;
}
th {
background: #1e1e2f;
color: white;
font-weight: 500;
font-size: 16px;
padding: 16px 12px;
text-align: left;
}
td {
padding: 16px 12px;
border-bottom: 1px solid #eaeef2;
color: #333;
}
tr:last-child td {
border-bottom: none;
}
.price {
color: #ff6b00;
font-weight: 600;
}
.first-col {
width: 80px;
}
th:first-child {
padding-left: 20px;
}
td:first-child {
padding-left: 20px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th class="first-col">
<input type="checkbox" name="" id="checkAll">全选
</th>
<th>商品</th>
<th>商家</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米手机</td>
<td>小米</td>
<td class="price">￥1999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米净水器</td>
<td>小米</td>
<td class="price">￥4999</td>
</tr>
<tr>
<td>
<input type="checkbox" name="check" class="ck">
</td>
<td>小米电视</td>
<td>小米</td>
<td class="price">￥5999</td>
</tr>
</tbody>
</table>
<script>
const checkAll=document.querySelector('#checkAll')
const ck=document.querySelectorAll('.ck')
checkAll.addEventListener('click',function(){
for(let i=0;i<ck.length;i++){
ck[i].checked=this.checked
}
})
for(let i=0;i<ck.length;i++){
ck[i].addEventListener('click',function(){
checkAll.checked=document.querySelectorAll('.ck:checked').length===ck.length
})
}
</script>
</body>
</html>