全选 checkbox 失效主因是事件绑定时机不当、子项状态变更未同步更新全选框、动态添加商品未用事件委托及 DOM 与数据不同步；需确保 DOM 加载完成再绑定、双向监听、事件委托及数据状态同步。
全选 checkbox 点击没反应？检查事件绑定时机
DOM 渲染完成前就执行 JS 绑定，document.querySelectorAll('.cart-item-checkbox') 会返回空 NodeList。常见于脚本写在 里，或没加 DOMContentLoaded 监听。
实操建议：
- 把 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 插入的新商品项完全无效。用户加购后发现新行无法参与全选，就是这个原因。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
实操建议：
- 对子项 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 —— 否则状态必然脱节
全选功能看着简单，但 DOM 更新、事件时机、数据同步三者稍有错位，就会出现“看起来勾了，其实没生效”或者“删了还参与结算”的问题。最容易被跳过的，是子项变更后对全选框状态的重算逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
