最简单可靠的方式是用 <label> 直接包裹单选按钮和文字，无需 id 和 for，天然支持互斥选择、无障碍及移动端热区；常见错误包括未关联、for/id 不匹配或用 <span> 替代 <label>。
用 label 包裹单选按钮和文字最简单可靠
直接把 <input type="radio"> 和文字一起放进 <label> 标签里，点击文字就能触发选中——这是兼容性最好、语义最清晰的做法，所有现代浏览器和读屏工具都支持。
常见错误是只写文字不关联，或者用 for + id 却漏掉其中一环。用包裹法就完全避开这些坑。
<label><input type="radio" name="size" value="m"> Medium</label>- 不需要额外写
id或for，也不用 JS 绑定 - 多个同名
name的input自动组成互斥组
用 for 属性手动关联时必须配对 id
当文字和单选按钮不能包裹在一起（比如布局分离、CSS 约束或 SSR 模板限制），就得用 for 关联。但这里出错率极高：漏写 id、拼错 id 值、for 值多空格或大小写不一致，都会让点击失效。
<input type="radio" id="size-l" name="size" value="l"><label for="size-l">Large</label>-
for的值必须和对应input的id完全一致（包括大小写、连字符） - 同一个
name下的所有input必须有唯一id，否则关联混乱
别用 <span> 或纯文本替代 <label></H3>
<p>很多人图省事，把文字放在 <code><span>
或直接写在 input 后面，看起来能点，但实际只是碰巧触发了浏览器的“点击后邻元素”行为（不稳定且非标准）。这会导致：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器无法识别该文字是控件标签，无障碍失败
- 移动端点击区域小，容易误操作
- 某些浏览器（如旧版 Safari）根本不响应
- Chrome DevTools 的 Accessibility 面板会标为 “Missing label”
样式和可访问性要同步考虑
加了 label 不代表万事大吉。如果用了 display: none 隐藏单选按钮、又没提供视觉反馈，用户根本不知道哪个被选中；或者用 CSS 把 label 设成 pointer-events: none，点击就彻底失效。
- 隐藏原生单选按钮可用
appearance: none或clip-path，但必须用伪元素或额外元素模拟选中状态 - 确保焦点能落到
label上（默认支持），且:focus-within或:focus样式可见 - 测试键盘操作：
Tab进入、Space选中，是否正常
