全选 checkbox 失效主因是事件绑定时机不当、子项状态变更未同步更新全选框、动态添加商品未用事件委托及 DOM 与数据不同步；需确保 DOM 加载完成再绑定、双向监听、事件委托及数据状态同步。
全选 checkbox 点击没反应？检查事件绑定时机
DOM 渲染完成前就执行 JS 绑定，document.querySelectorAll('.cart-item-checkbox') 会返回空 NodeList。常见于脚本写在 里，或没加 DOMContentLoaded 监听。
实操建议：
立即学习“前端免费学习笔记（深入）”；
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 把 JS 放在
前，或用document.addEventListener('DOMContentLoaded', ...) - 别用
onclick="toggleAll()"内联写法——它无法动态响应后续新增的商品项 - 确保全选框的
id或class名称和 JS 中查询的一致，比如全选框是id="check-all"，JS 就得用document.getElementById('check-all')
子项勾选后全选框不同步？别只监听全选框
只给全选框加 change 事件，子项勾选变化时全选框状态不会自动更新，这是最常被忽略的逻辑断点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须同时监听子项 checkbox 的
change事件，重新计算已勾选数量 - 判断逻辑要严谨：当所有子项都勾选时，才设全选框为
checked；只要有一个未勾选，全选框就要设为unchecked（不能只用“是否全勾”来反推） - 避免用
checked == true判断，直接用element.checked—— 它返回布尔值，而getAttribute('checked')返回字符串或 null
动态添加商品后全选失效？事件委托更可靠
用 forEach 遍历当前 DOM 绑定事件，对后续通过 JS 插入的新商品项完全无效。用户加购后发现新行无法参与全选，就是这个原因。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对子项 checkbox 使用事件委托：监听父容器（如
class="cart-list"），用e.target.matches('.cart-item-checkbox')过滤 - 全选框仍用直接绑定，因为它位置固定、不动态增删
- 每次勾选/取消后，重新统计有效子项数量（注意排除被禁用或隐藏的 checkbox）
全选后删除商品，界面上残留勾选状态？DOM 和数据要同步
只操作 UI checkbox 的 checked 属性，却不更新对应商品数据的 selected 字段，后续点击“结算”时可能提交了已被删掉的项。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 删除某商品前，先检查其 checkbox 是否勾选；若勾选，同步将数据数组中对应项的
selected设为false - 全选操作应同时更新 DOM 和内存数据：遍历数据列表设
selected = e.target.checked，再批量更新界面 - 如果用了框架（如 Vue/React），别绕过响应式系统直接操作 DOM —— 否则状态必然脱节
