单选按钮互斥的关键在于共享相同的name属性值，id属性仅用于label绑定且必须唯一；应使用显式for绑定提升可访问性；初始选中用checked布尔属性，由服务端控制。
HTML 单选按钮组（）本身不“单选”，关键在于是否共享同一个 name 属性值 —— 只有同名的 radio 才能互斥选择。
必须用相同的 name 值才能互斥
浏览器只根据 name 属性判断哪些 radio 属于同一组。不同 name 值的 radio 完全独立，哪怕视觉上挨着放，也能同时选中。
- ✅ 正确：所有选项共用
name="gender" - ❌ 错误：一个写
name="gender"，另一个写name="sex"或漏写name - ⚠️ 注意：
id可以各不相同（也必须不同），它只用于关联，不影响单选逻辑
用
点击文字无法触发 radio 选择，是新手最常忽略的体验缺陷。解决方式有两种，推荐显式 for 绑定：
- 不包裹、不绑定 → 点击文字无效，只能点小圆圈
- 用
包裹 → 有效，但不利于样式分离和可访问性 - 显式
for+id→ 推荐，语义清晰，支持屏幕阅读器，CSS 选择器也方便（如label[for="opt1"]）
初始选中用 checked，不要用 value 或 JS 模拟
checked 是布尔属性，只需存在即生效。服务器返回数据时，应由后端决定哪个 radio 加上该属性，前端不要靠 JS “补选”。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
- ❌ 错误：
（多余值） - ❌ 危险：
document.querySelector('[value="pro"]').click()（可能触发事件副作用，且 DOM 尚未就绪时失败） - ? 提示：如果表单重载后需恢复上次选择，应在服务端渲染时直接写入
checked，而非依赖客户端存储再 JS 设置
注意移动端点击区域和无障碍要求
小圆圈默认尺寸在手机上难点击，且缺乏语义化描述会影响读屏软件识别。
- 用 CSS 扩大可点击区域（例如设置
label的padding，而非缩放input自身） - 确保每个
内有明确文本，避免仅靠图标或空格 - 若用图片替代文字，必须加
alt描述，或通过aria-label补充（但优先用真实文字） - 禁用状态要用
disabled属性，不要仅靠 CSS 灰掉 +pointer-events: none，否则键盘用户仍可聚焦
真正让单选“生效”的，从来不是标签写法多漂亮，而是 name 是否一致、checked 是否由服务端可控、label 是否真正可交互 —— 其余都是锦上添花。
