当前位置：首页 > JavaScript

js实现单选

2026-03-13 23:45:45JavaScript

实现单选功能的方法

使用HTML和JavaScript实现单选功能可以通过多种方式完成。以下是几种常见的实现方法：

使用原生HTML单选按钮

HTML本身提供了单选按钮（radio button）元素，通过设置相同的name属性可以实现单选效果。

<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>

<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>

使用JavaScript监听事件

如果需要通过JavaScript动态控制单选行为，可以监听点击事件并更新选中状态。

<div class="radio-group">
  <div class="radio-option" data-value="option1">Option 1</div>
  <div class="radio-option" data-value="option2">Option 2</div>
</div>

document.querySelectorAll('.radio-option').forEach(option => {
  option.addEventListener('click', function() {
    document.querySelectorAll('.radio-option').forEach(opt => {
      opt.classList.remove('selected');
    });
    this.classList.add('selected');
  });
});

使用CSS样式增强视觉效果

为单选按钮添加自定义样式可以提升用户体验。

.radio-option {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.radio-option.selected {
  background-color: #007bff;
  color: white;
}

动态获取选中值

通过JavaScript可以轻松获取当前选中的单选按钮的值。

function getSelectedValue() {
  const selectedOption = document.querySelector('.radio-option.selected');
  return selectedOption ? selectedOption.dataset.value : null;
}

使用框架简化实现

如果使用前端框架如React，可以更简洁地实现单选功能。

js实现单选

function RadioGroup() {
  const [selected, setSelected] = useState(null);

  return (
    <div>
      {['option1', 'option2'].map(option => (
        <div
          key={option}
          className={selected === option ? 'selected' : ''}
          onClick={() => setSelected(option)}
        >
          {option}
        </div>
      ))}
    </div>
  );
}