label嵌套input[type="checkbox"]是首选方案，能确保无障碍支持、无需js、点击热区大且语义完整；for关联为备选但易因id错误失效；隐藏原生checkbox须用视觉隐藏而非display:none。
直接用 label 包裹 input[type="checkbox"] 是最可靠、无障碍支持最好、也最不需要 JS 的绑定方式；显式用 for 属性关联是备选，但容易因 ID 冲突或拼写错误失效。
label 嵌套 checkbox 是首选方案
把 input 放进 label 里，点击文字、图标、空白区域甚至 label 边框，都能触发状态切换——浏览器原生行为，无需监听事件，也不依赖 CSS 定位。
- DOM 结构必须是
<label><input type="checkbox">文本或图标</label>，不能中间插其他块级元素打断流式关系 - 不需设置
id和for，避免动态渲染时 ID 重复（比如 Vue/React 列表循环） - 屏幕阅读器会自动将 label 内容作为该复选框的可访问名称，语义满分
- 移动端点击热区天然扩大，比只点小方块靠谱得多
用 for 属性关联时，ID 必须严格匹配
当无法嵌套（例如复选框在别处、或受框架限制），才用 for。但只要 ID 写错一个字母、大小写不一致、或 DOM 中存在同名 ID，就完全失效。
-
<input type="checkbox" id="agree">和<label for="agree"></label>必须完全一致，包括连字符、下划线、大小写 - ID 不能以数字开头（
id="1item"合法但部分旧辅助工具可能出问题，建议用id="item-1"） - 同一页面中 ID 必须唯一；服务端渲染或 SSR 场景下，模板循环生成 ID 要加唯一前缀（如
id="user-{{id}}-checkbox"） - 不要用
class或data-id替代id——for只认id
隐藏原生 checkbox 时千万别用 display: none
想自定义样式？可以，但必须保留其可访问性：键盘聚焦、屏幕阅读器读取、JS 可读取 .checked 状态。用 display: none 或 visibility: hidden 会直接砍掉这些能力。
- 正确做法是视觉隐藏：
position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; - 确保
label仍有cursor: pointer，否则用户看不出可点击 - 如果用伪元素画勾（如
label::after），要配合input:checked + label::after或input:checked ~ label::after，取决于 DOM 顺序；嵌套结构下推荐用input:checked + span::after（把图标抽成span） - 焦点样式（
:focus-visible）不能丢，否则键盘用户找不到当前聚焦项
表格中放 checkbox，td 是唯一合法容器
在 <table> 里，<code>input[type="checkbox"] 只能出现在 <td> 或 <code><th> 内部。塞到 <code><tr> 里、或用绝对定位“贴”在单元格外，都会导致语义断裂、移动端点击失灵、甚至被浏览器自动修正为无效结构。
<ul><li>每行数据对应一个 <code><td>，里面放 <code><label><input name="selected" value="123"><span class="icon"></span></label>
<th> 里，<code>name 不要和数据行一样（避免提交时混入“全选”这个无意义值）
tr 索引，而要用 document.querySelectorAll('input[name="selected"]:checked') 直接捞出已勾选项最容易被忽略的是：所有自定义样式方案都建立在 label 与 input 的 DOM 关系稳定基础上。一旦 JS 动态移动、替换或克隆节点，for 关联会断，嵌套结构可能被破坏，伪元素选择器也会失效。与其后期补救，不如从第一行 HTML 就定好结构。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
