HTML单选按钮使用教程

本文深入解析HTML单选按钮（radio）的正确使用规范，强调其核心逻辑并非依赖type属性自动互斥，而是严格依靠相同name值实现分组；指出value应为简洁无歧义的标识符而非显示文案，checked才是原生默认选中的唯一有效布尔属性，并着重提醒无障碍支持的关键实践——必须通过label精准关联、保留键盘焦点与屏幕阅读器语义，避免因name遗漏、value滥用或可访问性缺失导致功能异常、后端解析失败或真实用户无法操作等严重问题。

radio 单选按钮必须用 name 属性分组

单选按钮不是靠 type="radio" 自动互斥的，而是靠 name 属性值相同才构成一组。如果漏写 name，或者每项 name 值不一致，它们就各自独立，能同时被选中——这不是 bug，是规范行为。

实操建议：

• 同一组单选按钮必须共用完全相同的 name 值，比如 name="gender"
• 避免用动态生成的随机 name（如带时间戳或索引），否则逻辑会断裂
• 服务端接收时，只拿到该 name 对应的唯一一个 value，所以后端字段也得按单值设计

value 属性决定提交内容，不是 label 文本

用户看到的是 label 里的文字，但表单提交、JS 读取 input 的 value 时，实际传的是 value 属性值。很多人误把中文文本直接塞进 value，导致 URL 编码混乱或后端解析失败。

实操建议：

• value 应使用简洁、无空格、无特殊字符的标识符，如 value="male"、value="female"
• 显示文案统一交给 label 或旁边文字，例如：<input type="radio" name="role" value="admin">管理员
• JS 获取选中项：用 document.querySelector('input[name="role"]:checked')?.value，注意空值判断

默认选中用 checked，别用 defaultChecked

defaultChecked 是 React 等框架里的受控属性，在纯 HTML 中无效；HTML 原生只认 checked 这个布尔属性。写成 checked="false" 或 checked="" 都会被浏览器当作 true 处理。

实操建议：

• 设默认项，直接写 checked（无值），如：<input type="radio" name="theme" value="light" checked>
• 若需 JS 动态设置，默认先清空所有同 name 的 checked，再设目标项：document.querySelector('input[value="dark"]').checked = true
• 不要依赖初始 DOM 状态做业务判断，始终以当前 :checked 查询为准

无障碍与可访问性不能只靠 appearance

单纯用 CSS 隐藏原生 radio（如 appearance: none）却不提供替代焦点、键盘操作和屏幕阅读器支持，会导致键盘用户无法 tab 切换、盲人用户读不到选项状态。

实操建议：

• 必须搭配 label 标签，并用 for 和 id 关联，或把 input 包在 label 内
• 自定义样式时，保留 :focus-visible 样式，且确保选中态（:checked + span::before）有足够对比度
• 避免用 div 模拟 radio，除非完整实现 ARIA role="radio"、aria-checked、aria-labelledby 等

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML单选按钮使用教程》文章吧，也可关注golang学习网公众号了解相关技术文章。