js实现单选效果

使用HTML和JavaScript实现单选效果

HTML中通过<input type="radio">配合<label>实现单选按钮组，JavaScript用于增强交互逻辑：

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

  <input type="radio" id="option2" name="radioGroup" value="2">
  <label for="option2">选项2</label>

  <input type="radio" id="option3" name="radioGroup" value="3">
  <label for="option3">选项3</label>
</div>

获取选中值的方法

通过事件监听或直接查询获取当前选中的值：

// 方法1：事件监听
document.querySelectorAll('input[name="radioGroup"]').forEach(radio => {
  radio.addEventListener('change', function() {
    if(this.checked) {
      console.log('选中值:', this.value);
    }
  });
});

// 方法2：获取当前选中值
function getSelectedValue() {
  const selected = document.querySelector('input[name="radioGroup"]:checked');
  return selected ? selected.value : null;
}

动态设置选中状态

通过JavaScript控制单选按钮的选中状态：

// 设置指定值选中
function setSelectedValue(value) {
  const radio = document.querySelector(`input[name="radioGroup"][value="${value}"]`);
  if(radio) radio.checked = true;
}

// 清除所有选中
function clearSelection() {
  document.querySelectorAll('input[name="radioGroup"]').forEach(radio => {
    radio.checked = false;
  });
}

样式自定义示例

通过CSS增强视觉反馈，使用相邻兄弟选择器控制选中样式：

input[type="radio"] {
  display: none;
}

input[type="radio"] + label {
  padding: 8px 12px;
  border: 1px solid #ddd;
  cursor: pointer;
  margin-right: 5px;
}

input[type="radio"]:checked + label {
  background-color: #2196F3;
  color: white;
  border-color: #2196F3;
}

封装为可复用组件

创建RadioGroup类实现完整功能：

class RadioGroup {
  constructor(selector) {
    this.radios = document.querySelectorAll(selector);
    this.bindEvents();
  }

  bindEvents() {
    this.radios.forEach(radio => {
      radio.addEventListener('change', () => {
        if(radio.checked) this.onChange(radio.value);
      });
    });
  }

  onChange(value) {
    console.log('当前选择:', value);
    // 可扩展自定义回调
  }

  get value() {
    const checked = [...this.radios].find(r => r.checked);
    return checked ? checked.value : null;
  }

  set value(val) {
    const target = [...this.radios].find(r => r.value === val);
    if(target) target.checked = true;
  }
}

// 使用示例
const group = new RadioGroup('input[name="radioGroup"]');