HTML单选按钮分组设置教程

HTML单选按钮（radio）的常见问题大多源于四个关键细节：name属性不一致导致选项无法互斥、label标签未正确绑定致使点击文字无效、误用defaultChecked而非checked设置默认选中、以及JavaScript获取值时未用:checked伪类直接查询且缺乏空值判断；掌握这些核心要点——严格统一name值、优先采用嵌套式label绑定、静态默认选中只写checked、动态取值首选document.querySelector('input[name="xxx"]:checked')并判空——就能快速解决八成以上实际开发中的radio疑难杂症，显著提升表单可用性与代码健壮性。

radio 按钮不互斥？检查 name 属性是否一致

HTML 单选按钮（）能互斥选择的前提，是同一组内的所有按钮共享完全相同的 name 值。浏览器只认 name，不看 id、class 或位置关系。

常见错误现象：
– 点击一个 radio，其他同组选项没取消
– 控制台无报错，但表单提交时只拿到最后一个选中的值
– 使用 JS 获取 document.querySelectorAll('input[name="xxx"]') 返回空数组或数量不对

• name 值必须严格相等：大小写、空格、引号类型（双引号/单引号）都要一致
• 不同分组必须用不同 name，比如用户性别用 name="gender"，订阅偏好用 name="newsletter"
• 不要依赖 id 实现分组——id 只用于锚点或 JS 定位，对 radio 行为零影响

label 标签没绑定？点击文字无法触发选择

用户习惯点击文字选中 radio，但若 和 之间没建立关联，点击就无效。这不是 bug，是 HTML 规范行为。

使用场景：
– 表单可访问性要求（屏幕阅读器依赖 label 关联）
– 移动端触控面积太小，纯 input 点击困难

• 推荐写法：把 包在 内，无需 for 和 id

   深色模式

• 备选写法：用 for 属性绑定 id，此时 id 必须唯一且与 for 值完全匹配
• 避免写法：label 和 input 分开、无任何关联；或多个 radio 共用同一个 id（违反 HTML 唯一性）

初始状态怎么设默认选中？用 checked 而非 defaultChecked

HTML 中设置默认选中项，只用 checked 属性。JS 动态操作时才涉及 defaultChecked，它只是反映初始 HTML 是否写了 checked，不能用来切换状态。

性能 / 兼容性影响：
– checked 是布尔属性，写上即生效，无需 checked="true"
– 服务端渲染或静态 HTML 场景下，漏掉 checked 就没有默认值

• 正确写法：
• 错误写法：（冗余，部分旧浏览器可能误判）
• JS 修改时用 element.checked = true，不是 element.defaultChecked = true

获取选中值总为空？别遍历所有 radio

直接查 document.querySelector('input[name="xxx"]:checked') 最快最稳。遍历所有再判断 checked 是典型低效写法，还容易漏处理 null。

常见错误现象：
– JS 报错 Cannot read property 'value' of null
– 表单提交前校验时，始终拿不到值，尤其当用户还没点过任何选项

• 安全获取方式：

  const selected = document.querySelector('input[name="plan"]:checked');
  const value = selected ? selected.value : null;

• 注意：CSS 伪类 :checked 在 IE8+ 支持良好，无需 polyfill
• 如果后端要求“未选时传空字符串”，记得手动 fallback，因为 selected 为 null 时不会自动转成空串

name 属性拼错、label 绑定失效、checked 写法多余、JS 查询没判空——这四点占了 radio 实际问题的八成。细节看着琐碎，但改完立刻见效。

今天关于《HTML单选按钮分组设置教程》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！