HTML中如何实现radio单选按钮分组与默认选中设置

在HTML表单开发中，radio类型的input元素是专门用来实现单选交互的控件，它的核心特性是同一组内的选项只能选中一个，非常适合性别选择、支付方式选择等需要互斥选择的场景。要实现正确的单选效果，需要掌握分组和默认选中的核心设置方法。

radio单选按钮的基础语法

radio单选按钮的本质是<input>标签，需要将type属性设置为radio，同时每个单选按钮都需要搭配<label>标签来提升可点击区域和可用性，基础结构如下：

<!-- 单个radio单选按钮的基础结构 -->
<input type="radio" id="option1" name="group1" value="1">
<label for="option1">选项一</label>

这里的各个属性作用分别是：type="radio"定义元素为单选按钮，id用于和label标签关联，name用于定义分组，value是选中后提交到后端的值。

radio单选按钮的分组规则

radio单选按钮的分组完全依赖name属性，同一组内的所有radio元素必须设置完全相同的name值，不同组的name值需要区分开。浏览器会自动识别相同name的radio为同一组，同一组内只能有一个被选中，选中新的选项会自动取消之前选中的选项。

下面是一个分组的示例，实现了两个独立的单选组，分别是性别选择和学历选择：

<!-- 性别选择组，name统一为gender -->
<p>请选择性别：</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>

<!-- 学历选择组，name统一为education，和性别组区分 -->
<p>请选择学历：</p>
<input type="radio" id="bachelor" name="education" value="bachelor">
<label for="bachelor">本科</label>
<input type="radio" id="master" name="education" value="master">
<label for="master">硕士</label>
<input type="radio" id="doctor" name="education" value="doctor">
<label for="doctor">博士</label>

如果将不同组的radio设置了相同的name，它们会被合并为同一组，导致跨组选项也只能选一个，这是最常见的分组错误，开发时需要注意name值的唯一性分组。

设置radio默认选中状态

要给某个radio设置默认选中，只需要给对应的<input>标签添加checked属性即可。checked是布尔属性，不需要赋值，只要存在该属性，对应的单选按钮就会默认处于选中状态。

需要注意同一组内只能给一个radio添加checked属性，如果给多个同组radio添加checked，浏览器会默认选中最后一个带checked属性的选项。下面是默认选中的示例：

<p>请选择支付方式：</p>
<!-- 默认选中微信支付 -->
<input type="radio" id="wechat" name="pay_type" value="wechat" checked>
<label for="wechat">微信支付</label>
<input type="radio" id="alipay" name="pay_type" value="alipay">
<label for="alipay">支付宝支付</label>
<input type="radio" id="bank" name="pay_type" value="bank">
<label for="bank">银行卡支付</label>

实际开发注意事项

• 每个radio都要搭配<label>标签，for属性和radio的id对应，这样点击文字也能选中选项，提升用户体验。
• radio的value属性必须设置，它是表单提交时给后端传递的参数值，如果没有设置value，选中后提交的值为on，不利于后端处理。
• 如果需要动态设置默认选中，比如根据后端返回的数据设置选中项，可以通过JavaScript修改checked属性，示例如下：

// 动态设置id为wechat的radio为选中状态
document.getElementById('wechat').checked = true;

另外如果表单需要支持重置功能，点击重置按钮后，radio会恢复到初始的默认选中状态，也就是页面加载时带checked属性的选项会被重新选中，动态修改的checked状态在重置时不会保留。

HTMLradio单选按钮表单控件input_radio修改时间：2026-06-03 03:05:54