HTML输入标签怎么使用创建单选框组件

在前端开发内容学习中，HTML输入标签怎么使用创建单选框组件是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

单选框互斥靠相同name属性实现，大小写敏感；每行独立选择需用带ID的唯一name；value用语义化字符串；label提升可用性；checked设默认值；JS按name精准获取选中值。

用 <input type="radio"> 创建单选框，核心是靠 相同的 name 属性 实现互斥选择，不是靠 JS 控制或样式模拟。

同一组单选框必须共用 name

只有 name 完全一致（大小写敏感），浏览器才识别为一组，点击一个时自动取消同组其他项。比如性别选项：

• <input type="radio" name="gender" value="male"> 男
• <input type="radio" name="gender" value="female"> 女
• <input type="radio" name="gender" value="other"> 其他

若把其中一个写成 name="Gender" 或 name="user_gender"，它就脱离分组，变成独立开关——这是最常见错误。

每行独立选择时，name 要带唯一标识

表格中每行代表一条数据（如审批列表），需让每行各自二选一（如“通过/驳回”），就不能全用同一个 name。应为每行生成带 ID 的 name：

• 第 1 行：<input type="radio" name="decision_101" value="approve"> 和 <input type="radio" name="decision_101" value="reject">
• 第 2 行：<input type="radio" name="decision_102" value="approve"> 和 <input type="radio" name="decision_102" value="reject">

value 用语义化字符串（如 approve、reject），方便后端或 JS 直接判断，避免用 "1"/"0" 等无意义数字。

用 label 提升可用性，用 checked 设默认值

别直接点 input，要用 <label> 包裹或关联，扩大点击区域并支持屏幕阅读器：

• <label><input type="radio" name="role" value="admin"> 管理员</label>
• 或分开写：<input id="role-admin" type="radio" name="role" value="admin"><label for="role-admin">管理员</label>

默认选中项必须在 HTML 中用 checked 属性声明（布尔属性，写上即生效），不要等 JS 加载后再设：

• ✅ 正确：<input type="radio" name="status" value="active" checked> 启用
• ❌ 避免：<input type="radio" name="status" value="active"> + JS 手动设 checked = true

获取选中值要按 name 查找

JS 获取用户选择时，不要遍历所有 radio，而应按 name 精准定位：

• document.querySelector('input[name="gender"]:checked')?.value
• 提交表单时，浏览器会自动把当前选中的那个 name=value 发送到服务端

如果某组没任何项被选中，该 name 不会出现在提交数据中——注意后端做空值处理。