HTML单选按钮用法详解：如何分组、设置默认选中及实操要点

一、HTML单选按钮的基础语义与实现要点

1. 基本结构与关键属性

在表单中，单选按钮通过 input type="radio" 实现，属于常见的表单控件之一。要让同一组中的单选按钮互相排斥，需要为它们设置相同的 name 值，以建立一个逻辑分组。

每个选项还需要具备一个 value 属性来表示提交时的具体选项值，并且通常会配合 id 与 label 的关联，提升可点击区域和可访问性。

在页面初次加载时，若希望某一项处于默认选中状态，可以通过在对应的输入上添加 checked 属性。若不设置，则默认情况下没有被选中项。

<input type="radio" id="colorRed" name="color" value="red" checked>
<label for="colorRed">红色</label><br>

<input type="radio" id="colorGreen" name="color" value="green">
<label for="colorGreen">绿色</label><br>

<input type="radio" id="colorBlue" name="color" value="blue">
<label for="colorBlue">蓝色</label>

2. 可访问性与呈现的要点

为了提升可访问性，建议使用 label 标签 将文本描述与单选按钮绑定，或者使用 for 属性将文本与输入控件关联，这样在点击文本时也会触发对应的单选按钮，从而扩展可点击区域。

在样式设计时应注意保持充足的对比度与清晰的选中状态指示，尽量避免在未选中时隐藏输入控件的可用性信息。对于需要自定义样式的场景，优先保持原生控件的行为不被破坏，确保可访问性不被削弱。

另外一个要点是可以在需要时对分组内的按钮添加一个 required 属性，表示在当前表单中至少需要从该分组中选择一个选项，以提升数据完整性。

<label for="sizeS">小</label>
<input type="radio" id="sizeS" name="size" value="S" checked>

<label for="sizeM">中</label>
<input type="radio" id="sizeM" name="size" value="M">

<label for="sizeL">大</label>
<input type="radio" id="sizeL" name="size" value="L">

3. 常见布局与无障碍示例

将单选按钮与文本放在同一容器中，可以更易于在不同布局（行内、垂直排列）中控制间距与对齐，而不会影响无障碍描述的完整性。

要点包括：保持文本描述简洁、确保标签与输入一一对应，以及在复杂表单中保持分组的一致性。

下面给出一个简洁的分组示例，演示如何在同一行内展示文本与单选按钮，同时确保可点击性与可读性。

<div class="option-group">
  <input type="radio" id="opt1" name="mode" value="one">
  <label for="opt1">选项一</label>
</div>
<div class="option-group">
  <input type="radio" id="opt2" name="mode" value="two" checked>
  <label for="opt2">选项二</label>
</div>

二、如何分组单选按钮以实现互斥

1. 使用相同的 name 属性实现分组

要实现同一组中的单选按钮互斥，需要为同一组的所有按钮设置相同的 name，这样浏览器在同一组内只能选择一个选项。

在一个表单中，为不同的分组分配不同的 name，可以确保各组之间互不干扰，且提交时服务器端能区分清楚各自的选项。

为了可维护性，建议将分组的文本与控件统一包裹在一个容器中，并为每个分组提供一致的结构与命名规范，便于后续样式与脚本处理。

<div>
  <input type="radio" id="fruitApple" name="fruit" value="apple">
  <label for="fruitApple">苹果</label>

  <input type="radio" id="fruitBanana" name="fruit" value="banana" checked>
  <label for="fruitBanana">香蕉</label>
</div>

<div>
  <input type="radio" id="colorRed" name="color" value="red">
  <label for="colorRed">红色</label>

  <input type="radio" id="colorBlue" name="color" value="blue">
  <label for="colorBlue">蓝色</label>
</div>

2. 动态增删分组项的要点

在需要时，可以通过 JavaScript 动态创建、移动或重新分组单选按钮。通过修改 name 属性，可以把某些选项从一个分组移到另一个分组，从而实现更灵活的交互。

动态分组的实现应确保在切换分组时，当前已选中的项保持逻辑一致性，避免出现“未选中但仍交互在同组内”的情况。

下面给出一个简短的示例，展示如何将一个按钮从分组 A 移动到分组 B，通过修改其 name 属性实现分组切换。

function moveToGroup(radio, newGroupName){
  radio.name = newGroupName;
  // 可选：在 UI 显示上重新排列到新分组的容器中
}
</code>

<input type="radio" id="modeA" name="mode" value="A" checked>
<label for="modeA">模式A</label>

<input type="radio" id="modeB" name="mode" value="B">
<label for="modeB">模式B</label>

// 将 mode 的默认选中改为模式 B
document.querySelector('input[name="mode"][value="B"]').checked = true;

// 重置同组所有选项的选中状态
document.querySelectorAll('input[name="mode"]').forEach(r => r.checked = false);

<div aria-labelledby="sizeLabel">
  <input type="radio" id="sizeS2" name="size" value="S">
  <label id="sizeLabel" for="sizeS2">小</label>
</div>