单选按钮通过name属性实现分组,相同name的选项互斥,用户只能选择一项;使用checked属性设置默认选中项,并推荐结合label标签提升可访问性与用户体验。

HTML中的单选按钮(radio button)用于让用户在一组互斥选项中选择一项。用户只能从同一组中选择一个选项,这就是所谓的“单选”。
radio单选按钮的基本语法
使用 创建单选按钮。每个按钮通常配合一个 标签,提升可访问性和用户体验。
name 属性 是关键:只有 name 相同的 radio 按钮才会被归为一组,从而实现单选效果。不同 name 的按钮互不影响。
通过 name 属性实现分组
如果多个 radio 按钮的 name 值相同,浏览器会自动将它们视为一组,用户只能选中其中一个。
立即学习“前端免费学习笔记(深入)”;
例如以下两组性别和年龄段选择:
这两组分别独立操作,互不干扰。
设置默认选中项
使用 checked 属性可以让某个单选按钮在页面加载时默认被选中。
只需要在希望默认选中的 标签中添加 checked 或 checked="checked" 即可。
此时,“蓝色”选项会默认被选中。注意:同一组中只应有一个按钮设置 checked,否则最后一个会生效。
提升可读性与可用性的建议
- 始终为 radio 搭配 ,并使用 for 属性关联 id,点击文字也能选中按钮。
- 示例:
- 避免同一组中多个 checked,防止逻辑混乱。
- 服务端获取数据时,根据 name 获取对应 value,前端可通过 JavaScript 获取选中值。
基本上就这些。掌握 name 分组和 checked 默认选中,就能正确使用 HTML 单选按钮了。











