单选按钮(input type="radio")

单选按钮的基本概念

单选按钮是HTML表单中常用的元素之一，允许用户从一组选项中选择一个且只能选择一个。它通过<input type="radio">标签实现，通常与<label>标签配合使用以提高可访问性。单选按钮的特点是同一组内的按钮互斥，选中一个会自动取消同组其他按钮的选择状态。

<input type="radio" id="option1" name="choices" value="1">
<label for="option1">选项一</label>
<input type="radio" id="option2" name="choices" value="2">
<label for="option2">选项二</label>

单选按钮的核心属性

单选按钮有几个关键属性需要特别注意：

1. name属性：定义单选按钮的分组，相同name值的按钮属于同一组
2. value属性：表示该选项被选中时提交的值
3. checked属性：设置默认选中的选项
4. disabled属性：禁用该单选按钮

<input type="radio" id="male" name="gender" value="male" checked>
<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" disabled>
<label for="other">其他</label>

单选按钮的分组机制

单选按钮的分组完全依赖于name属性，而不是它们的物理位置。这意味着即使单选按钮分散在表单的不同位置，只要name相同，它们就属于同一组。

<!-- 第一组单选按钮 -->
<div>
  <input type="radio" id="color-red" name="color" value="red">
  <label for="color-red">红色</label>
</div>

<!-- 其他表单元素... -->

<!-- 第二组单选按钮，虽然位置分开但仍属于同一组 -->
<div>
  <input type="radio" id="color-blue" name="color" value="blue">
  <label for="color-blue">蓝色</label>
</div>

单选按钮与标签的关联

为了提高可用性和可访问性，单选按钮应该总是与<label>标签配合使用。有两种关联方式：

1. 隐式关联：将单选按钮包裹在label标签内
2. 显式关联：使用label的for属性指向单选按钮的id

<!-- 隐式关联 -->
<label>
  <input type="radio" name="size" value="small">
  小号
</label>

<!-- 显式关联 -->
<input type="radio" id="size-medium" name="size" value="medium">
<label for="size-medium">中号</label>

单选按钮的样式定制

默认的单选按钮样式可能不符合设计需求，可以通过CSS进行自定义。常见的技术是隐藏原生单选按钮，然后使用伪元素创建自定义样式。

<style>
  .custom-radio {
    position: absolute;
    opacity: 0;
  }
  .custom-radio + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
  }
  .custom-radio + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
  }
  .custom-radio:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2196F3;
  }
</style>

<input type="radio" id="custom1" name="custom" class="custom-radio">
<label for="custom1">自定义选项一</label>
<input type="radio" id="custom2" name="custom" class="custom-radio">
<label for="custom2">自定义选项二</label>

单选按钮的JavaScript交互

通过JavaScript可以动态控制单选按钮的状态，监听变化事件，以及获取选中的值。

<form id="myForm">
  <input type="radio" id="js-option1" name="js-options" value="1">
  <label for="js-option1">JavaScript选项1</label>
  <input type="radio" id="js-option2" name="js-options" value="2">
  <label for="js-option2">JavaScript选项2</label>
</form>

<script>
  const form = document.getElementById('myForm');
  const options = document.querySelectorAll('input[name="js-options"]');
  
  // 监听变化事件
  options.forEach(option => {
    option.addEventListener('change', function() {
      if(this.checked) {
        console.log(`选中的值是: ${this.value}`);
      }
    });
  });
  
  // 以编程方式设置选中状态
  setTimeout(() => {
    document.getElementById('js-option2').checked = true;
  }, 2000);
</script>

单选按钮在表单提交中的行为

当表单包含单选按钮时，只有被选中的单选按钮的name-value对会被提交。如果没有单选按钮被选中，则该组不会提交任何数据。

<form action="/submit" method="post">
  <input type="radio" id="submit-option1" name="submit-options" value="A">
  <label for="submit-option1">选项A</label>
  <input type="radio" id="submit-option2" name="submit-options" value="B">
  <label for="submit-option2">选项B</label>
  <button type="submit">提交</button>
</form>

单选按钮与框架的结合使用

在现代前端框架中，单选按钮通常与状态管理结合使用。以下是React和Vue中的示例：

React示例

function RadioGroup() {
  const [selected, setSelected] = useState('react1');
  
  return (
    <div>
      <label>
        <input 
          type="radio" 
          value="react1" 
          checked={selected === 'react1'}
          onChange={(e) => setSelected(e.target.value)}
        />
        React选项1
      </label>
      <label>
        <input 
          type="radio" 
          value="react2" 
          checked={selected === 'react2'}
          onChange={(e) => setSelected(e.target.value)}
        />
        React选项2
      </label>
    </div>
  );
}

Vue示例

<template>
  <div>
    <label>
      <input 
        type="radio" 
        value="vue1" 
        v-model="selected"
      />
      Vue选项1
    </label>
    <label>
      <input 
        type="radio" 
        value="vue2" 
        v-model="selected"
      />
      Vue选项2
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'vue1'
    }
  }
}
</script>

单选按钮的验证与错误处理

在表单验证中，确保用户至少选择一个单选按钮是常见需求。HTML5提供了required属性来实现基本验证。

<form id="validate-form">
  <fieldset>
    <legend>请选择一个选项(必填)</legend>
    <input type="radio" id="validate1" name="validate-group" value="1" required>
    <label for="validate1">验证选项1</label>
    <input type="radio" id="validate2" name="validate-group" value="2">
    <label for="validate2">验证选项2</label>
  </fieldset>
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById('validate-form').addEventListener('submit', function(e) {
    const checked = document.querySelector('input[name="validate-group"]:checked');
    if(!checked) {
      alert('请至少选择一个选项');
      e.preventDefault();
    }
  });
</script>

单选按钮的高级应用场景

单选按钮不仅限于简单的选择，还可以实现更复杂的交互，如：

1. 选项卡切换：使用单选按钮实现纯CSS的选项卡
2. 图片选择器：将单选按钮与图片结合
3. 响应式菜单：用于移动端菜单的显示/隐藏控制

<!-- 纯CSS选项卡示例 -->
<style>
  .tab-content { display: none; }
  #tab1:checked ~ .content1,
  #tab2:checked ~ .content2,
  #tab3:checked ~ .content3 {
    display: block;
  }
</style>

<div class="tab-container">
  <input type="radio" id="tab1" name="tabs" checked>
  <label for="tab1">选项卡1</label>
  <input type="radio" id="tab2" name="tabs">
  <label for="tab2">选项卡2</label>
  <input type="radio" id="tab3" name="tabs">
  <label for="tab3">选项卡3</label>
  
  <div class="tab-content content1">内容1...</div>
  <div class="tab-content content2">内容2...</div>
  <div class="tab-content content3">内容3...</div>
</div>

单选按钮的可访问性考虑

确保单选按钮对所有用户都可访问：

1. 始终使用关联的<label>
2. 为单选按钮组添加<fieldset>和<legend>
3. 确保有清晰的视觉反馈
4. 考虑键盘导航（Tab键切换，方向键选择）

<fieldset>
  <legend>配送方式</legend>
  <input type="radio" id="delivery-standard" name="delivery" value="standard">
  <label for="delivery-standard">标准配送</label>
  <input type="radio" id="delivery-express" name="delivery" value="express">
  <label for="delivery-express">快递</label>
  <input type="radio" id="delivery-pickup" name="delivery" value="pickup">
  <label for="delivery-pickup">自取</label>
</fieldset>

单选按钮的性能优化

虽然单选按钮本身对性能影响很小，但在大量使用时仍需注意：

1. 避免在单个页面中使用过多单选按钮组
2. 对于动态生成的单选按钮，考虑虚拟滚动
3. 减少不必要的DOM操作和事件监听

// 不好的做法 - 为每个单选按钮单独添加事件监听
document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', handleChange);
});

// 更好的做法 - 使用事件委托
document.addEventListener('change', function(e) {
  if(e.target.matches('input[type="radio"]')) {
    handleChange(e);
  }
});

单选按钮的跨浏览器兼容性

大多数现代浏览器对单选按钮的支持良好，但仍需注意：

1. 旧版IE可能对自定义样式支持有限
2. 移动端浏览器可能有默认样式差异
3. 某些CSS属性在不同浏览器中的表现可能不一致

/* 重置默认样式跨浏览器一致 */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

单选按钮与其他表单元素的组合

单选按钮常与其他表单元素配合使用，形成更复杂的交互：

<form>
  <fieldset>
    <legend>订单信息</legend>
    
    <div>
      <label>产品类型：</label>
      <input type="radio" id="product-type1" name="product-type" value="physical">
      <label for="product-type1">实体商品</label>
      <input type="radio" id="product-type2" name="product-type" value="digital">
      <label for="product-type2">数字商品</label>
    </div>
    
    <div id="shipping-options" style="display:none;">
      <label>配送方式：</label>
      <select name="shipping">
        <option value="standard">标准</option>
        <option value="express">快递</option>
      </select>
    </div>
  </fieldset>
</form>

<script>
  document.querySelectorAll('input[name="product-type"]').forEach(radio => {
    radio.addEventListener('change', function() {
      document.getElementById('shipping-options').style.display = 
        this.value === 'physical' ? 'block' : 'none';
    });
  });
</script>

单选按钮在响应式设计中的处理

在不同屏幕尺寸下，单选按钮的布局可能需要调整：

<style>
  .radio-group {
    display: flex;
    flex-direction: row;
    gap: 16px;
  }
  
  @media (max-width: 600px) {
    .radio-group {
      flex-direction: column;
      gap: 8px;
    }
  }
</style>

<div class="radio-group">
  <input type="radio" id="resp-option1" name="resp-options" value="1">
  <label for="resp-option1">响应式选项1</label>
  <input type="radio" id="resp-option2" name="resp-options" value="2">
  <label for="resp-option2">响应式选项2</label>
  <input type="radio" id="resp-option3" name="resp-options" value="3">
  <label for="resp-option3">响应式选项3</label>
</div>

单选按钮的测试策略

为确保单选按钮在各种情况下正常工作，应考虑以下测试场景：

1. 默认选中状态是否正确
2. 点击标签是否能切换选择
3. 键盘导航是否可用
4. 表单提交时是否正确传递值
5. 动态禁用/启用状态
6. 大量选项时的性能表现

// 简单的单元测试示例
describe('单选按钮测试', () => {
  it('应该正确响应点击事件', () => {
    const radio = document.createElement('input');
    radio.type = 'radio';
    document.body.appendChild(radio);
    
    let changed = false;
    radio.addEventListener('change', () => changed = true);
    
    radio.click();
    expect(radio.checked).toBe(true);
    expect(changed).toBe(true);
    
    document.body.removeChild(radio);
  });
});