html如何单选_html实现单选按钮组的方法【指南】

单选按钮互斥的关键在于共享相同的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 是否真正可交互 —— 其余都是锦上添花。