如何根据选中的单选按钮为元素分配class并切换激活状态？

嘿，我来帮你搞定这个单选按钮切换section显示的问题！看起来你已经能给单选按钮加类了，但现在需要把逻辑关联到对应的section上对吧？下面是完整的实现方案，分三部分来写：

HTML结构 #

首先我们要让单选按钮和对应的section建立明确的关联，这里用data-target属性来绑定，这样后续JS能轻松找到对应的section。同时确保单选按钮的name属性一致，保证它们是互斥的单选组：

<!-- 单选按钮组 -->
<div class="radio-controls">
  <label>
    <input type="radio" name="stage-switch" data-target=".stage1-row" checked> 阶段1
  </label>
  <label>
    <input type="radio" name="stage-switch" data-target=".stage2-row"> 阶段2
  </label>
  <label>
    <input type="radio" name="stage-switch" data-target=".stage3-row"> 阶段3
  </label>
</div>

<!-- 内容区块 -->
<section class="stage-row stage1-row">这是阶段1的内容区块</section>
<section class="stage-row stage2-row">这是阶段2的内容区块</section>
<section class="stage-row stage3-row">这是阶段3的内容区块</section>

CSS样式 #

先设置所有section默认隐藏，只有带有active类的才显示：

/* 默认隐藏所有阶段区块 */
.stage-row {
  display: none;
  margin-top: 1.5rem;
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
}

/* 激活状态的区块显示 */
.stage-row.active {
  display: block;
}

JavaScript逻辑 #

这部分是核心：初始化时让默认选中的单选对应section激活，然后监听单选按钮的切换事件，动态切换active类：

// 等待DOM加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有单选按钮
  const radioBtns = document.querySelectorAll('input[name="stage-switch"]');
  
  // 初始化：找到默认选中的单选，给对应section添加active类
  const defaultCheckedRadio = document.querySelector('input[name="stage-switch"]:checked');
  if (defaultCheckedRadio) {
    const targetSection = document.querySelector(defaultCheckedRadio.dataset.target);
    targetSection.classList.add('active');
  }
  
  // 给每个单选按钮绑定切换事件
  radioBtns.forEach(radio => {
    radio.addEventListener('change', function() {
      // 先移除所有section的active类
      document.querySelectorAll('.stage-row').forEach(section => {
        section.classList.remove('active');
      });
      // 给当前选中单选对应的section添加active类
      const targetSection = document.querySelector(this.dataset.target);
      targetSection.classList.add('active');
    });
  });
});

补充说明 #

• 用data-target绑定比硬写索引更灵活，后续如果调整区块顺序或者新增区块，只要对应好data-target的值就行，不用改JS逻辑
• 用change事件而不是click，是因为单选按钮也可能通过键盘（比如Tab+空格）切换，change事件能覆盖所有选中场景
• 如果你的HTML结构和示例不一样，只需要调整选择器（比如把.stage-row换成你实际的section类名）就行

内容的提问来源于stack exchange，提问作者AlisaM