HTML单选按钮

HTML单选按钮

HTML单选按钮（Radio Button）是HTML表单中的一种输入控件，允许用户从一组选项中选择唯一一个选项。单选按钮通常用于需要互斥选择的场景，例如性别选择、问卷调查中的单选题等。

基本语法

HTML单选按钮使用<input type="radio">元素创建。多个单选按钮通过相同的name属性形成一组互斥选项。

示例代码

<form>
    <p>请选择您的性别：</p>
    <input type="radio" id="male" name="gender" value="male">
    <label for="male">男</label><br>
    <input type="radio" id="female" name="gender" value="female">
    <label for="female">女</label><br>
    <input type="radio" id="other" name="gender" value="other">
    <label for="other">其他</label>
</form>

输出效果： <form>

请选择您的性别：

   <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>

   <input type="radio" id="other" name="gender" value="other">
   <label for="other">其他</label>

</form>

关键属性

单选按钮重要属性

属性	描述	示例
name	定义单选按钮组的名称（必须相同才能形成互斥）	name="gender"
value	提交表单时发送到服务器的值	value="female"
checked	设置默认选中项	checked
disabled	禁用单选按钮	disabled

分组原理

单选按钮通过name属性实现分组。浏览器会确保同一组（相同name）中只能选择一个选项。

flowchart TD A[单选按钮1 name="group1"] --> B{互斥选择} C[单选按钮2 name="group1"] --> B D[单选按钮3 name="group2"] --> E{独立选择}

高级用法

默认选中

使用checked属性设置默认选项：

<input type="radio" id="opt1" name="options" value="1" checked>
<label for="opt1">默认选项</label>

与<label>关联

推荐使用<label>元素提高可访问性：

• 点击标签文字也能选中按钮
• 屏幕阅读器能正确识别

动态处理

JavaScript获取选中值示例：

document.querySelector('input[name="gender"]:checked').value;

实际应用案例

用户注册表单中的性别选择：

<form action="/register" method="post">
    <fieldset>
        <legend>个人信息</legend>
        <div>
            <p>性别：</p>
            <input type="radio" id="reg-male" name="user_gender" value="M" required>
            <label for="reg-male">男性</label>
            
            <input type="radio" id="reg-female" name="user_gender" value="F">
            <label for="reg-female">女性</label>
            
            <input type="radio" id="reg-unspecified" name="user_gender" value="U">
            <label for="reg-unspecified">不愿透露</label>
        </div>
    </fieldset>
</form>

数学表示

单选按钮组可以表示为互斥事件集合： $P(A\cap B)=0\text{当}A\ne B$ 其中A和B代表不同的单选选项。

浏览器兼容性

所有现代浏览器都完全支持单选按钮，包括：

• Chrome 1+
• Firefox 1+
• Safari 1+
• Edge 12+
• Opera 6+

最佳实践

1. 始终为每组单选按钮提供默认选择（使用checked） 2. 使用<fieldset>和<legend>组织相关选项 3. 移动设备上确保点击区域足够大 4. 遵循WCAG可访问性指南：

  * 每个单选按钮必须有对应的<label>
  * 避免使用CSS完全隐藏原生控件

常见问题

Q: 如何让多个单选按钮组共存？ A: 为不同组使用不同的name属性。

Q: 单选按钮和复选框有什么区别？ A: 复选框允许多选，而单选按钮强制单选择。

Q: 为什么我的单选按钮不互斥？ A: 检查所有相关按钮是否具有完全相同的name属性值。