功能设计全选/取消全选表头的复选框控制所有商品复选框联动反馈单个商品勾选状态变化时自动更新全选状态视觉反馈复选框状态变化直观可见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 避免了常见陷阱// 错误写法会产生bugcheckAll.checked document.querySelectorAll(.ck:checked).length ck.length// 正确写法checkAll.checked document.querySelectorAll(.ck:checked).length ck.length使用严格相等避免类型转换带来的意外结果5. 执行流程分析// 初始化checkAll(未勾选) 三个商品(未勾选)// 场景1点击全选1. 触发全选click事件2. 循环遍历所有商品设置checked true3. 所有商品变为勾选状态// 场景2点击全选取消1. 触发全选click事件2. 循环遍历所有商品设置checked false3. 所有商品变为未勾选状态// 场景3手动勾选所有商品1. 依次点击三个商品2. 每个商品click事件中计算: 选中数量(3) 总数量(3) → true3. 全选复选框自动变为勾选// 场景4手动取消任一商品1. 点击某个已勾选商品2. 计算: 选中数量(2) 总数量(3) → false3. 全选复选框自动变为未勾选完整代码!-- !DOCTYPE htmlhtml langzhheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title小米商品表格/titlestyle* {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/headbodytabletheadtrth classfirst-colinput typecheckbox name idcheckAll全选/thth商品/thth商家/thth价格/th/tr/theadtbodytrtdinput typecheckbox namecheck classck/tdtd小米手机/tdtd小米/tdtd classprice1999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米净水器/tdtd小米/tdtd classprice4999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米电视/tdtd小米/tdtd classprice5999/td/tr/tbody/tablescriptconst checkAlldocument.querySelector(#checkAll)const ckdocument.querySelectorAll(.ck)checkAll.addEventListener(click,function(){for(let i0;ick.length;i){ck[i].checkedthis.checked}})for(let i0;ick.length;i){ck[i].addEventListener(click,function(){checkAll.checkeddocument.querySelectorAll(.ck:checked).lengthck.length})}/script/body/html
表格全选功能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 避免了常见陷阱// 错误写法会产生bugcheckAll.checked document.querySelectorAll(.ck:checked).length ck.length// 正确写法checkAll.checked document.querySelectorAll(.ck:checked).length ck.length使用严格相等避免类型转换带来的意外结果5. 执行流程分析// 初始化checkAll(未勾选) 三个商品(未勾选)// 场景1点击全选1. 触发全选click事件2. 循环遍历所有商品设置checked true3. 所有商品变为勾选状态// 场景2点击全选取消1. 触发全选click事件2. 循环遍历所有商品设置checked false3. 所有商品变为未勾选状态// 场景3手动勾选所有商品1. 依次点击三个商品2. 每个商品click事件中计算: 选中数量(3) 总数量(3) → true3. 全选复选框自动变为勾选// 场景4手动取消任一商品1. 点击某个已勾选商品2. 计算: 选中数量(2) 总数量(3) → false3. 全选复选框自动变为未勾选完整代码!-- !DOCTYPE htmlhtml langzhheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title小米商品表格/titlestyle* {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/headbodytabletheadtrth classfirst-colinput typecheckbox name idcheckAll全选/thth商品/thth商家/thth价格/th/tr/theadtbodytrtdinput typecheckbox namecheck classck/tdtd小米手机/tdtd小米/tdtd classprice1999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米净水器/tdtd小米/tdtd classprice4999/td/trtrtdinput typecheckbox namecheck classck/tdtd小米电视/tdtd小米/tdtd classprice5999/td/tr/tbody/tablescriptconst checkAlldocument.querySelector(#checkAll)const ckdocument.querySelectorAll(.ck)checkAll.addEventListener(click,function(){for(let i0;ick.length;i){ck[i].checkedthis.checked}})for(let i0;ick.length;i){ck[i].addEventListener(click,function(){checkAll.checkeddocument.querySelectorAll(.ck:checked).lengthck.length})}/script/body/html
