应仅用原生label+for/id语义绑定，禁用所有label的js点击监听与手动切换；js仅操作input.checked或click()，监听input的change事件而非click。
label 点击后 checkbox 未切换：事件冒泡干扰
直接给 label 绑定 onclick 并手动修改 input.checked，会导致原生行为被覆盖或重复触发。浏览器默认点击 label 会自动触发关联 input 的 click 事件，再加一层 JS 切换，就可能出现状态翻转两次、最终不变，或与用户直接点击 input 本体冲突。
解决办法是：**不写任何 JS 控制选中逻辑**，只用原生语义绑定。确保每个 label 有 for 属性，且值等于对应 input 的 id；input 必须有 id，且不能重复。
- 不要给
label写onclick，也不调用input.click() - 不要在 JS 中监听
label的点击然后改checked - 如果必须用 JS 响应变化，监听
input的change事件，不是click
需要 JS 动态控制时：操作 input 元素本身
当你要通过按钮“全选”、URL 参数初始化、或表单重置后恢复状态时，JS 应直接操作 input 元素的 checked 属性或 click() 方法，而不是碰 label。
- 设为选中：
document.getElementById('APPLE').checked = true - 触发原生切换（等价于用户点击）：
document.getElementById('APPLE').click() - 批量操作时，遍历
querySelectorAll('input[type="checkbox"]')，别遍历label - 注意：赋值
checked = false不会触发change事件；调用click()会
label 和 input 分离布局时：for/id 必须严格匹配
若因 CSS 布局需要把 label 和 input 拆开（比如 input 在左、label 文字在右，中间隔了其他元素），就不能用嵌套写法 <label><input>TEXT</label>，必须用 for/id 显式关联。
-
for值必须和input的id字符串完全一致（区分大小写、无空格） - 避免用动态生成的 ID 含特殊字符，如
id="fruit-1"可以，但id="fruit[1]"会让for="fruit[1]"失效 - 检查浏览器开发者工具 Elements 面板，确认点击
label时，对应input的checked属性确实变化
兼容旧代码或复杂交互时：避免阻止默认行为
有些老项目在 label 上写了 onclick="return false" 或 event.preventDefault()，这会彻底禁用原生联动。即使你后续调用 input.click()，也可能因事件顺序混乱导致 UI 与状态不同步。
- 删掉所有对
label的preventDefault或return false - 如果必须拦截并自定义逻辑（如权限校验），应在
input的click事件中处理，并用event.stopImmediatePropagation()防止多次响应 - 测试场景包括：鼠标点击、空格键聚焦后按 Space、屏幕阅读器指令
label + for/id 是最稳定的方式，JS 只该用于“驱动状态”，而非“模拟点击”。容易被忽略的是：哪怕只加了一行 label.addEventListener('click', ...)，就可能破坏整个复选框组的可访问性与一致性。Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
