HTML单选按钮教程：radio分组与默认设置

本文详细介绍了HTML单选按钮（radio button）的使用方法，重点讲解了如何利用`name`属性实现单选按钮的分组，确保同一组内的选项互斥，用户只能选择一个。同时，深入解析了`checked`属性的用法，帮助开发者设置页面加载时的默认选中项。为了提升用户体验和网站可访问性，文章还推荐使用``标签与单选按钮进行关联。通过本文，您将掌握HTML单选按钮的分组技巧和默认选中设置，为网页表单设计打下坚实基础。

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

HTML中的单选按钮（radio button）用于让用户在一组互斥选项中选择一项。用户只能从同一组中选择一个选项，这就是所谓的“单选”。

radio单选按钮的基本语法

使用 创建单选按钮。每个按钮通常配合一个 标签，提升可访问性和用户体验。

男

女

name 属性 是关键：只有 name 相同的 radio 按钮才会被归为一组，从而实现单选效果。不同 name 的按钮互不影响。

通过 name 属性实现分组

如果多个 radio 按钮的 name 值相同，浏览器会自动将它们视为一组，用户只能选中其中一个。

例如以下两组性别和年龄段选择：

男

女



18岁以下

18-60岁

60岁以上

这两组分别独立操作，互不干扰。

设置默认选中项

使用 checked 属性可以让某个单选按钮在页面加载时默认被选中。

只需要在希望默认选中的 标签中添加 checked 或 checked="checked" 即可。

红色

蓝色

绿色

此时，“蓝色”选项会默认被选中。注意：同一组中只应有一个按钮设置 checked，否则最后一个会生效。

提升可读性与可用性的建议

• 始终为 radio 搭配 ，并使用 for 属性关联 id，点击文字也能选中按钮。
• 示例：男
• 避免同一组中多个 checked，防止逻辑混乱。
• 服务端获取数据时，根据 name 获取对应 value，前端可通过 JavaScript 获取选中值。

基本上就这些。掌握 name 分组和 checked 默认选中，就能正确使用 HTML 单选按钮了。

到这里，我们也就讲完了《HTML单选按钮教程：radio分组与默认设置》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于分组,name属性,checked属性,label标签,单选按钮的知识点！