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

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

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

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

radio单选按钮的基本语法

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

&lt;input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;male&quot;&gt;<label>男</label><br>
&lt;input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;female&quot;&gt;<label>女</label>

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

通过 name 属性实现分组

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

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

<!-- 性别组 --><br>
&lt;input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;male&quot;&gt;<label>男</label><br>
&lt;input type=&quot;radio&quot; name=&quot;gender&quot; value=&quot;female&quot;&gt;<label>女</label><br><br><p><!-- 年龄组 --><br>
&lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;under18&quot;&gt;<label>18岁以下</label><br>
&lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;18-60&quot;&gt;<label>18-60岁</label><br>
&lt;input type=&quot;radio&quot; name=&quot;age&quot; value=&quot;over60&quot;&gt;<label>60岁以上</label></p>

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

设置默认选中项

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

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

&lt;input type=&quot;radio&quot; name=&quot;color&quot; value=&quot;red&quot;&gt;<label>红色</label><br>
&lt;input type=&quot;radio&quot; name=&quot;color&quot; value=&quot;blue&quot; checked&gt;<label>蓝色</label><br>
&lt;input type=&quot;radio&quot; name=&quot;color&quot; value=&quot;green&quot;&gt;<label>绿色</label>

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

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

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

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

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