复选框必须与label正确关联以确保可访问性：显式关联需for与id严格字符串全等匹配；隐式关联推荐嵌套input于label内；自定义图标须用视觉隐藏而非display:none；多选组须用fieldset+legend包裹并为每项设独立label。
复选框必须和 label 正确关联，否则点击文字不触发、屏幕阅读器读不出、Tab 键跳过——这不是样式问题，是语义缺失。
label for 属性必须严格匹配 checkbox 的 id
显式关联靠 for 和 id 配对，浏览器只做字符串全等比对，大小写、连字符、空格、前后空格全算错：
-
for="agree"对应id="Agree"→ 失效（大小写不一致） -
for="user-agree"对应id="user_agree"→ 失效（连字符 vs 下划线） -
for="agree"对应name="agree"→ 失效（for只认id，不认name） - React/Vue 中动态生成
id={`checkbox-${index}`}，但index为undefined→ 渲染出id="checkbox-"→ 关联断裂
验证方法：在开发者工具中点选 label，看右侧 Elements 面板的 for 值能否高亮跳转到对应 input#xxx；手动点击文字，确认复选框是否切换状态。
嵌套结构更可靠，但有硬性限制
把 input[type="checkbox"] 直接放进 label 内部，是隐式关联，无需 id 和 for，语义和行为都更稳：
<label> <input type="checkbox" name="newsletter" value="yes"> 订阅邮件通知 </label>
但必须遵守边界条件：
- 只能包裹原生可聚焦控件：
input、textarea、select、button—— 不能包div或自定义组件 - 不能中间插层：
<label><span><input></span></label>会破坏语义，部分读屏无法识别 - label 内不能含其他交互元素（如
<a></a>、<button></button>），否则可能拦截事件或干扰焦点流
自定义图标触发 checkbox 要避免 display:none
想用 Font Awesome 或 SVG 图标代替原生 checkbox，常见错误是直接加 style="display:none" —— 这会让控件完全不可访问：
- 正确做法：用视觉隐藏技术，例如
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; - 图标必须放在同一
label内（嵌套方式）或通过for显式指向该 checkbox - 确保热区足够大（至少 44×44px），并提供焦点态样式（如
label:focus-within或input:focus + label）
示例（嵌套 + 图标）：
<label> <input type="checkbox" name="terms" value="accepted" class="visually-hidden"><i class="fa-solid fa-square-check"></i> 我已阅读并同意条款 </label>
多选组要用 fieldset + legend 包裹
多个 checkbox 构成逻辑组（如“通知方式”），不能只靠 CSS class 或 div 分组：
- 必须用
fieldset包裹，legend作组标题 —— 屏幕阅读器会把legend作为每项的前置描述 - 每个 checkbox 仍需独立
label（嵌套或for），不能共用一个label - 错误写法：
<label for="notify">通知方式</label><input type="checkbox" id="email">邮件<input type="checkbox" id="sms">短信—— 只有一个label，且for指向不存在的id
真正起作用的是结构语义，不是视觉排列。哪怕 checkbox 排成一行或藏在折叠面板里，只要 fieldset + legend + 独立 label 在，无障碍支持就在线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
