单选框每个选项必须单独配 label 且 for 属性精准匹配唯一 id，禁止共用 label 包裹多个 radio；嵌套写法仅适用单个控件，显式 for/id 更稳妥可访问。
单选框必须每个选项单独配一个 label，不能共用
一组 input[type="radio"] 共享同一个 name（比如 name="gender"），但每个选项的 id 必须唯一，且每个 label 的 for 必须精准指向它自己的 id。常见错误是只写一个 label 包住全部 radio，结果只有第一个能响应点击。
实操建议：
- 每个 radio 都要有独立
id：如id="gender-male"、id="gender-female" - 每个
label的for值必须逐字符复制粘贴自对应 radio 的id，大小写、连字符都不能差 - 别用
label包裹整组 radio —— 它只会把焦点/切换逻辑绑定到第一个控件上 - 验证方法：手动点每个 label 文字，看是否各自触发对应 radio 的选中状态
for 和 id 不匹配时，点击完全无效
浏览器不校验 for 是否真实存在，也不做大小写容错或模糊匹配。只要 label 的 for="xxx" 找不到 DOM 中完全一致的 id="xxx"，点击就静默失败——没有报错，但用户无法通过点文字来操作。
典型错误现象：
-
<label for="email">邮箱</label><input name="email">→ 缺id，点击无效 -
<label for="user-email">邮箱</label><input id="email">→ 字符串不等，失效 -
<label for="Username">用户名</label><input id="username">→ 大小写不一致，不绑定
调试技巧：用 DevTools 选中 label，看 for 值，再全局搜索该字符串是否作为 id 存在且仅出现一次。
嵌套写法可用，但仅限单个控件，且不适用于整组 radio
把单个 radio 直接写进 label 里（<label><input type="radio" name="film" value="Film1">夺冠</label>）是合法的隐式绑定，无需 for 和 id。但它只对当前标签内的**第一个可聚焦表单控件**生效。
所以它适合单个选项，比如第三题要求的“姜子牙”那一项；但绝不适合把两个 radio 都塞进同一个 label 里——那样第二个 radio 就彻底脱离 label 控制。
注意点：
- 嵌套结构在动态 JS 操作（如拖拽重排、条件渲染）中容易断裂，DOM 移动后语义连接丢失
- 旧版 Safari 对嵌套 radio 的支持不稳定，显式
for/id更稳妥 - 若用框架（React/Vue），确保生成的
id是稳定、可预测的，避免随机值导致 SSR 与 CSR 不一致
JavaScript 取值前，先确认 label 是否真绑定了控件
label 本身不存数据，也不参与取值。JS 读的是 radio 元素自身的 checked 属性。但若 label 绑定失败，常意味着 DOM 结构已有隐患：重复 id、控件被移除又重建但没同步更新 for、或用了封装组件却未透出原生 id。
取值关键点：
- 判断是否选中：用
radioElement.checked（布尔值），不是radioElement.value - 获取当前选中的值：遍历同
name的所有 radio，找checked === true的那个的value - 自动化测试中
click(label)失败，大概率是 DOM 关联缺失，不是 JS 逻辑问题
最易被忽略的细节：label 绑定看似只是“点一下更方便”，但它直接决定键盘 Tab 导航能否正确停驻、屏幕阅读器能否朗读上下文——这些在视觉上完全不可见，却构成可访问性的底线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
