label 和 checkbox 绑定是必须完成的基础操作，否则导致点击文字无效、键盘不可聚焦、屏幕阅读器无法识别；推荐嵌套结构（label 包裹 input），避免 for/id 匹配错误，表格中优先用 name 分组而非 id。
label 和 checkbox 绑定不是“可选优化”，而是必须完成的基础操作——否则点击文字无效、键盘不可聚焦、屏幕阅读器无法识别，直接导致可访问性失败。
用 for 属性显式绑定时，id 必须严格匹配
这是最常见出错点：大小写、空格、特殊字符全敏感。浏览器不会报错，但绑定静默失效。
-
for的值必须与input的id完全一致（包括连字符、下划线、数字位置） - 避免用纯数字开头的
id，如id="1option"，部分旧环境解析异常；推荐id="opt-1" - 动态生成时别拼错变量，比如
for="item-${i}"但id="item${i}"少了短横线 - 不要在同一个页面重复使用相同
id，哪怕只有一处绑定，也会让querySelector行为不可靠
嵌套结构更可靠，但要注意 DOM 顺序和样式穿透
把 input 直接放进 label 内部，无需 id/for，语义强、兼容稳、无障碍原生支持好。
- 结构必须是
<label><input type="checkbox">文本或图标</label>，input不能被其他标签包裹再塞进label - 如果用了 CSS 框架（如 Bootstrap），检查是否对
label > input做了display: none或visibility: hidden——这会让复选框不可聚焦，必须改用position: absolute; opacity: 0视觉隐藏 - 自定义样式时，伪元素（如
::before）要基于label定位，且input:checked + label::before这类选择器在嵌套结构中不生效，得换成input:checked ~ span::before或调整结构
表格里批量复选框，别用 id，改用 data-id 和 name
在 <table> 中每行放一个复选框，目标不是“绑定文字”，而是“可批量取值+状态可控”。此时 <code>id 反而成为累赘。
- 去掉所有
id和for，统一用name="selected"分组，提交时自动聚合成数组 - 业务主键存进
data-id="1024"，而不是value="1024"——因为value是表单提交值，可能需区分显示值与存储 ID - 全选逻辑监听
change，遍历document.querySelectorAll('input[name="selected"]')并赋值.checked = true/false，别用setAttribute - 移动端点击区域小？确保每个复选框都在独立
<td> 内，并用 <code>text-align: center对齐，label包裹能自然扩大热区最容易被忽略的是：绑定完成后没验证键盘操作。按
Tab能否聚焦到复选框？空格键能否切换？焦点样式是否可见？这些不是“锦上添花”，而是判定绑定是否真正生效的第一道门槛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
