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

单选按钮的基本概念

单选按钮(<input type="radio">)是HTML表单中用于从一组选项中选择单个选项的控件。它们通常以圆形按钮的形式呈现，当选中时会显示一个实心圆点。单选按钮的特点是同一组内的按钮互斥，只能选择其中一个选项。

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

单选按钮的属性

单选按钮支持多种属性来控制其行为和外观：

• name：定义单选按钮组的名称，相同name的单选按钮属于同一组
• value：当表单提交时发送到服务器的值
• checked：布尔属性，设置默认选中状态
• disabled：禁用单选按钮
• required：表单提交前必须选择其中一个选项

<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属性设置为相同的值，可以创建互斥的选项组。同一组内的单选按钮只能选择一个。

<h3>选择支付方式</h3>
<input type="radio" id="credit" name="payment" value="credit">
<label for="credit">信用卡</label>
<input type="radio" id="paypal" name="payment" value="paypal">
<label for="paypal">PayPal</label>
<input type="radio" id="alipay" name="payment" value="alipay">
<label for="alipay">支付宝</label>

<h3>配送方式</h3>
<input type="radio" id="standard" name="shipping" value="standard">
<label for="standard">标准配送</label>
<input type="radio" id="express" name="shipping" value="express">
<label for="express">快递</label>

单选按钮与标签的关联

使用<label>元素与单选按钮关联可以提高可用性和可访问性。有两种方式关联：

1. 将单选按钮包裹在<label>内
2. 使用for属性指向单选按钮的id

<!-- 方式一 -->
<label>
  <input type="radio" name="color" value="red">
  红色
</label>

<!-- 方式二 -->
<input type="radio" id="blue" name="color" value="blue">
<label for="blue">蓝色</label>

单选按钮的样式定制

虽然浏览器提供了默认的单选按钮样式，但可以通过CSS进行自定义。常见方法是隐藏原生控件，使用伪元素创建自定义外观。

<style>
  .custom-radio {
    position: absolute;
    opacity: 0;
  }
  .custom-radio + label {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
  }
  .custom-radio + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-radius: 50%;
    background: #fff;
  }
  .custom-radio:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5px;
    width: 12px;
    height: 12px;
    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动态控制单选按钮的状态和响应选择事件。

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const radios = document.querySelectorAll('input[name="size"]');
    
    radios.forEach(radio => {
      radio.addEventListener('change', function() {
        if(this.checked) {
          console.log('选择的尺寸是:', this.value);
          document.getElementById('selected-size').textContent = this.value;
        }
      });
    });
  });
</script>

<input type="radio" id="small" name="size" value="S">
<label for="small">小号 (S)</label>
<input type="radio" id="medium" name="size" value="M">
<label for="medium">中号 (M)</label>
<input type="radio" id="large" name="size" value="L">
<label for="large">大号 (L)</label>

<p>您选择的尺寸是: <span id="selected-size">未选择</span></p>

单选按钮在表单中的使用

单选按钮通常与<form>元素一起使用，收集用户选择的单个选项。表单提交时，选中的单选按钮的name和value会被发送到服务器。

<form action="/submit" method="post">
  <fieldset>
    <legend>订阅选项</legend>
    <input type="radio" id="daily" name="subscription" value="daily" checked>
    <label for="daily">每日简报</label>
    <input type="radio" id="weekly" name="subscription" value="weekly">
    <label for="weekly">每周摘要</label>
    <input type="radio" id="monthly" name="subscription" value="monthly">
    <label for="monthly">每月回顾</label>
  </fieldset>
  <button type="submit">提交</button>
</form>

单选按钮的可访问性考虑

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

• 始终使用<label>关联文本
• 为单选按钮组添加<fieldset>和<legend>提供上下文
• 确保有足够的颜色对比度
• 提供键盘导航支持

<fieldset>
  <legend>您如何得知我们的服务？</legend>
  <input type="radio" id="source-social" name="source" value="social">
  <label for="source-social">社交媒体</label>
  <input type="radio" id="source-friend" name="source" value="friend">
  <label for="source-friend">朋友推荐</label>
  <input type="radio" id="source-ad" name="source" value="ad">
  <label for="source-ad">广告</label>
</fieldset>

单选按钮与复选框的区别

虽然单选按钮和复选框(<input type="checkbox">)都是选择控件，但有重要区别：

<!-- 单选按钮示例 - 只能选一个 -->
<input type="radio" name="meal" value="breakfast">早餐
<input type="radio" name="meal" value="lunch">午餐
<input type="radio" name="meal" value="dinner">晚餐

<!-- 复选框示例 - 可以多选 -->
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="sports">运动
<input type="checkbox" name="hobby" value="music">音乐

单选按钮的响应式设计

在响应式布局中，可能需要调整单选按钮的排列方式。可以使用CSS Flexbox或Grid来实现不同屏幕尺寸下的布局变化。

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

<div class="radio-group">
  <label><input type="radio" name="device" value="phone">手机</label>
  <label><input type="radio" name="device" value="tablet">平板</label>
  <label><input type="radio" name="device" value="laptop">笔记本</label>
  <label><input type="radio" name="device" value="desktop">台式机</label>
</div>

单选按钮的验证

可以使用HTML5的required属性确保用户必须选择一个选项，或者使用JavaScript进行更复杂的验证。

<form id="survey-form">
  <fieldset>
    <legend>您对我们的服务满意吗？ (必选)</legend>
    <input type="radio" id="very-satisfied" name="satisfaction" value="5" required>
    <label for="very-satisfied">非常满意</label>
    <input type="radio" id="satisfied" name="satisfaction" value="4">
    <label for="satisfied">满意</label>
    <input type="radio" id="neutral" name="satisfaction" value="3">
    <label for="neutral">一般</label>
    <input type="radio" id="unsatisfied" name="satisfaction" value="2">
    <label for="unsatisfied">不满意</label>
    <input type="radio" id="very-unsatisfied" name="satisfaction" value="1">
    <label for="very-unsatisfied">非常不满意</label>
  </fieldset>
  <button type="submit">提交反馈</button>
</form>

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

单选按钮的动态生成

在复杂应用中，可能需要根据数据动态生成单选按钮组。

<div id="color-options"></div>

<script>
  const colors = [
    { id: 'red', value: 'red', label: '红色' },
    { id: 'green', value: 'green', label: '绿色' },
    { id: 'blue', value: 'blue', label: '蓝色' },
    { id: 'yellow', value: 'yellow', label: '黄色' }
  ];
  
  const container = document.getElementById('color-options');
  colors.forEach(color => {
    const radio = document.createElement('input');
    radio.type = 'radio';
    radio.id = color.id;
    radio.name = 'color';
    radio.value = color.value;
    
    const label = document.createElement('label');
    label.htmlFor = color.id;
    label.textContent = color.label;
    
    container.appendChild(radio);
    container.appendChild(label);
    container.appendChild(document.createElement('br'));
  });
</script>

单选按钮与框架集成

在现代前端框架中，单选按钮的使用方式有所不同。以下是几个流行框架中的示例：

React中的单选按钮

function ColorPicker() {
  const [selectedColor, setSelectedColor] = useState('red');
  
  return (
    <div>
      {['red', 'green', 'blue'].map(color => (
        <label key={color}>
          <input
            type="radio"
            name="color"
            value={color}
            checked={selectedColor === color}
            onChange={() => setSelectedColor(color)}
          />
          {color}
        </label>
      ))}
      <p>当前选择: {selectedColor}</p>
    </div>
  );
}

Vue中的单选按钮

<template>
  <div>
    <label v-for="option in options" :key="option.value">
      <input
        type="radio"
        v-model="selected"
        :value="option.value"
      />
      {{ option.text }}
    </label>
    <p>选择的是: {{ selected }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'A',
      options: [
        { text: '选项A', value: 'A' },
        { text: '选项B', value: 'B' },
        { text: '选项C', value: 'C' }
      ]
    };
  }
};
</script>

Angular中的单选按钮

import { Component } from '@angular/core';

@Component({
  selector: 'app-size-selector',
  template: `
    <div *ngFor="let size of sizes">
      <input
        type="radio"
        id="{{size.id}}"
        name="size"
        [value]="size.value"
        [(ngModel)]="selectedSize"
      />
      <label [for]="size.id">{{size.label}}</label>
    </div>
    <p>选择的尺寸: {{selectedSize}}</p>
  `
})
export class SizeSelectorComponent {
  selectedSize = 'M';
  sizes = [
    { id: 'size-s', value: 'S', label: '小号' },
    { id: 'size-m', value: 'M', label: '中号' },
    { id: 'size-l', value: 'L', label: '大号' }
  ];
}

单选按钮的性能优化

当页面中有大量单选按钮时，可以考虑以下优化措施：

1. 使用事件委托而不是为每个单选按钮单独添加事件监听器
2. 虚拟滚动长列表中的单选按钮
3. 避免不必要的DOM操作

<div id="radio-container" class="scroll-container">
  <!-- 大量单选按钮将通过JavaScript动态加载 -->
</div>

<script>
  document.getElementById('radio-container').addEventListener('click', function(e) {
    if(e.target.type === 'radio') {
      console.log('选择了:', e.target.value);
    }
  });
  
  // 虚拟滚动实现
  function loadVisibleRadios() {
    // 根据滚动位置只渲染可见区域的单选按钮
  }
</script>

单选按钮的国际化考虑

在多语言应用中，单选按钮的标签需要根据用户语言动态变化。

<div id="language-radios">
  <!-- 将通过JavaScript根据用户语言设置动态生成 -->
</div>

<script>
  const translations = {
    en: {
      red: 'Red',
      green: 'Green',
      blue: 'Blue'
    },
    zh: {
      red: '红色',
      green: '绿色',
      blue: '蓝色'
    },
    ja: {
      red: '赤',
      green: '緑',
      blue: '青'
    }
  };
  
  function updateRadios(lang) {
    const container = document.getElementById('language-radios');
    container.innerHTML = '';
    
    Object.entries(translations[lang]).forEach(([value, label]) => {
      const radio = document.createElement('input');
      radio.type = 'radio';
      radio.id = `color-${value}`;
      radio.name = 'color';
      radio.value = value;
      
      const labelEl = document.createElement('label');
      labelEl.htmlFor = `color-${value}`;
      labelEl.textContent = label;
      
      container.appendChild(radio);
      container.appendChild(labelEl);
    });
  }
  
  // 根据用户偏好设置语言
  updateRadios(navigator.language.startsWith('zh') ? 'zh' : 'en');
</script>

单选按钮的测试策略

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

1. 默认选中状态是否正确
2. 同组单选按钮的互斥性
3. 表单提交时是否正确发送选中的值
4. 禁用状态下的行为
5. 键盘导航和屏幕阅读器的可访问性
6. 响应式布局下的显示和交互

// 使用测试框架(如Jest)的示例测试
describe('单选按钮测试', () => {
  beforeEach(() => {
    document.body.innerHTML = `
      <form id="test-form">
        <input type="radio" id="opt1" name="test" value="1">
        <label for="opt1">选项1</label>
        <input type="radio" id="opt2" name="test" value="2" checked>
        <label for="opt2">选项2</label>
        <input type="radio" id="opt3" name="test" value="3" disabled>
        <label for="opt3">选项3</label>
      </form>
    `;
  });
  
  test('默认选中第二个选项', () => {
    const opt2 = document.getElementById('opt2');
    expect(opt2.checked).toBe(true);
  });
  
  test('选择第一个选项后应取消第二个选项', () => {
    const opt1 = document.getElementById('opt1');
    const opt2 = document.getElementById('opt2');
    opt1.click();
    expect(opt1.checked).toBe(true);
    expect(opt2.checked).toBe(false);
  });
});