当前位置：首页 > JavaScript

js 实现单选

2026-03-15 09:29:32JavaScript

使用原生 JavaScript 实现单选功能

通过 querySelectorAll 获取所有单选按钮元素，遍历并为每个按钮添加点击事件监听器。点击时取消之前选中的按钮状态，并设置当前按钮为选中状态。

const radioButtons = document.querySelectorAll('.radio-button');
radioButtons.forEach(button => {
  button.addEventListener('click', function() {
    radioButtons.forEach(btn => btn.classList.remove('active'));
    this.classList.add('active');
  });
});

使用 HTML 和 CSS 配合实现

HTML 结构使用 input[type="radio"] 原生单选控件，通过 label 标签关联实现点击触发。CSS 隐藏原生单选按钮，自定义样式通过 :checked 伪类控制。

<div class="radio-group">
  <input type="radio" id="option1" name="radioGroup" checked>
  <label for="option1">选项1</label>
  <input type="radio" id="option2" name="radioGroup">
  <label for="option2">选项2</label>
</div>

input[type="radio"] {
  display: none;
}
label {
  padding: 8px 16px;
  border: 1px solid #ddd;
  cursor: pointer;
}
input[type="radio"]:checked + label {
  background-color: #007bff;
  color: white;
}

使用事件委托优化性能

在父元素上监听点击事件，通过事件冒泡机制处理子元素单选逻辑。适合动态生成的单选按钮列表，减少事件监听器数量。

document.getElementById('radioContainer').addEventListener('click', (e) => {
  if (e.target.classList.contains('radio-item')) {
    const items = document.querySelectorAll('.radio-item');
    items.forEach(item => item.classList.remove('active'));
    e.target.classList.add('active');
  }
});

数据驱动的实现方式

将选项数据存储在数组中，动态生成单选按钮，并通过 dataset 属性保存关联值。

const options = [
  { id: 1, text: '红色' },
  { id: 2, text: '蓝色' }
];

const container = document.getElementById('radio-container');
options.forEach(opt => {
  const btn = document.createElement('div');
  btn.className = 'radio-btn';
  btn.dataset.value = opt.id;
  btn.textContent = opt.text;
  btn.addEventListener('click', handleRadioSelect);
  container.appendChild(btn);
});

function handleRadioSelect(e) {
  document.querySelectorAll('.radio-btn').forEach(b => {
    b.classList.toggle('selected', b === e.target);
  });
}

表单集成方案

与表单提交结合时，使用 hidden input 存储实际值，方便表单序列化处理。

js 实现单选

<div class="custom-radios">
  <div class="radio-option" data-value="A">选项A</div>
  <div class="radio-option" data-value="B">选项B</div>
  <input type="hidden" name="radioValue" id="radioValue">
</div>

const options = document.querySelectorAll('.radio-option');
options.forEach(option => {
  option.addEventListener('click', () => {
    options.forEach(opt => opt.classList.remove('selected'));
    option.classList.add('selected');
    document.getElementById('radioValue').value = option.dataset.value;
  });
});