全选按钮的checked状态不自动控制反选逻辑，反选需手动遍历取反赋值；须排除全选框自身，正确处理indeterminate状态、缓存DOM元素、记录初始值以确保状态一致性。
全选按钮的 checked 状态不自动控制反选逻辑
HTML 本身没有“反选”语义，<input type="checkbox"> 的 checked 属性只是反映当前勾选状态，不会触发任何反向操作。所谓“反选”，完全是 JavaScript 手动遍历、取反、赋值的过程。全选按钮（比如一个“全选”复选框）和列表项之间没有任何隐式绑定——你必须显式写代码把它们连起来。
常见错误是以为给全选框加个 onclick 就能联动反选，结果发现点反选按钮时，全选框状态没同步更新，或者部分项漏掉。这是因为 DOM 状态和 JS 逻辑没对齐。
- 全选框的
checked值只代表它自己，不影响其他 checkbox - 反选操作必须手动读取每个目标 checkbox 的
checked值，再赋相反值 - 如果用
querySelectorAll('input[type="checkbox"]')获取元素，注意排除全选框本身，否则它也会被翻转
indeterminate 状态不是可选，而是反选后全选框的合理视觉反馈
当用户手动勾选/取消部分子项，而全选框仍处于“全选”状态时，它的视觉应该变为中间态（—），即 indeterminate。这个状态不会影响 checked 值（仍为 false），但能准确传达“非全选非全不选”的混合状态。反选逻辑里忽略它，会导致 UI 与数据严重脱节。
- 反选后，要重新统计子项：全勾选 → 全选框
checked = true；全未勾选 →checked = false；其余情况 →indeterminate = true -
indeterminate只能通过 JS 设置：selectAllCheckbox.indeterminate = true，不能写在 HTML 里 - 某些旧版 iOS Safari 对
indeterminate渲染异常，需配合 CSSappearance: none+ 自定义背景图兜底
反选性能取决于子项数量，别在循环里反复查 DOM
如果列表有几百个 checkbox，每次反选都用 document.querySelectorAll('.item-checkbox') 查一遍，再逐个设 .checked = !item.checked，会触发多次重排重绘。尤其在移动端，卡顿明显。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 缓存 checkbox 元素集合，比如初始化时存到
const items = Array.from(document.querySelectorAll('.item-checkbox')) - 反选时直接遍历数组，统一设置
item.checked = !item.checked，最后再统一批量更新 UI（现代浏览器会合并渲染） - 避免在循环中调用
getElementById或重复querySelector，它们开销远高于数组索引访问
“全选→反选→再反选”不是回到原状，要注意初始状态丢失风险
很多实现把反选写成“对当前所有 checked 值取反”，看似正确，但忽略了原始默认状态。比如页面加载时某些 checkbox 是 checked="checked"，用户手动取消了其中几个，此时全选框变 indeterminate；如果这时点反选，再点一次反选，得到的不是初始状态，而是两次翻转后的状态——原始默认值已不可恢复。
- 如需支持“还原初始”，得在初始化时用
dataset或独立变量记录每个 checkbox 的默认checked值 - 更轻量的做法是：反选只作用于当前可见/启用的项，跳过
disabled项（它们的checked不应被修改） - React/Vue 等框架中，这类逻辑建议收归 state 管理，而非直接操作 DOM
checked
反选看着简单，真正稳住的关键在于：DOM 状态、JS 数据、UI 视觉三者始终对齐。漏掉任意一环，用户点几下就会发现“怎么又不对了”。
