label的for属性必须严格匹配radio的id，大小写、连字符、空格等逐字符一致；每个radio需唯一id，不可共用；也可用label包裹radio实现隐式绑定。
label 的 for 属性必须严格匹配 radio 的 id
label 绑定 radio 不是靠 name 或 class，而是靠 for 属性值与 id 属性值完全一致。浏览器只认这个映射关系，大小写、空格、下划线都必须一模一样。
常见错误是写成 for="gender" 却忘了给 <input type="radio"> 加 id="gender"，或者加了但拼错（比如 id="gander"），这时点击 label 完全没反应。
- 确保每个 radio 都有唯一
id，哪怕它们属于同一组（name相同） -
for值不能带#（那是 CSS 选择器写法，HTML 中不加） - 如果用 JS 动态生成 radio，务必同步设置
id，否则 label 失效
不写 for/id 也能绑定：用 label 包裹 radio
另一种合法方式是把 <input type="radio"> 直接放进 <label> 标签内部，此时无需 for 和 id。
例如：
<label><input type="radio" name="theme" value="dark"> 深色模式</label>点击“深色模式”文字就能选中该 radio。
立即学习“前端免费学习笔记（深入）”；
- 这种方式更简洁，适合静态表单或模板渲染简单场景
- 注意：label 内容和 input 必须在同一个标签层级，不能被其他块级元素隔开（比如中间插个
<p>就会断开绑定） - 若 label 内含多个元素（如图标 + 文字），确保 radio 是直接子节点，否则部分旧浏览器可能不识别
同一组 radio 必须共用 name，但 id 必须各不相同
radio 的分组逻辑靠 name，而 label 绑定靠 id，这两个属性职责不同，不能混用。
错误写法：
<input type="radio" name="size" id="size" value="s"><label for="size">S</label><br><input type="radio" name="size" id="size" value="m"><label for="size">M</label>——两个 radio 共用
id="size"，违反 HTML 唯一性约束，label 行为不可预测（通常只绑定第一个）。
- 正确做法：每项用独立
id，如id="size-s"、id="size-m" -
name保持一致才能互斥，否则会变成可多选的 checkbox 行为 - 服务端接收时，只看
name值，所以前端id怎么命名不影响后端逻辑
无障碍与可访问性依赖正确的绑定
屏幕阅读器依靠 for/id 关联或包裹结构来告知用户“这个标签控制哪个控件”。如果绑定失效，视障用户无法通过 label 触发 radio，只能靠方向键逐个聚焦，体验严重下降。
这不是“锦上添花”，而是 WCAG 2.1 的强制要求（1.3.1 和 3.3.2 条款）。Chrome DevTools 的 Lighthouse 检测也会报 Form elements do not have associated labels。
- 检查方法：右键 inspect label → 看
for值 → 找对应id元素是否存在且唯一 - 避免用 JS 模拟 click 事件替代原生绑定，这绕过可访问性树
- 不要为了省事用
aria-labelledby替代for/id，除非有复杂嵌套需求
id 生成逻辑出错，比如循环变量没参与 id 构造，导致所有 radio id 相同。这种问题在视觉上完全看不出，但 label 点击只对第一个生效，且无障碍检测直接失败。 
