纯JavaScript实现点击单选框切换显示不同Div的需求

HTML结构 #

先搭建基础的单选框和需要切换的Div，注意单选框要用相同的name属性组成一组：

<label>
  <input type="radio" name="contentSwitch" value="target1" checked> 显示第一个内容区
</label>
<label>
  <input type="radio" name="contentSwitch" value="target2"> 显示第二个内容区
</label>

<div id="target1" class="content-box">这是第一个Div的内容</div>
<div id="target2" class="content-box hidden">这是第二个Div的内容</div>

基础样式（可选） #

用CSS类控制隐藏状态，比直接写行内样式更灵活：

.content-box {
  margin-top: 10px;
  padding: 15px;
  border: 1px solid #ddd;
}
.hidden {
  display: none;
}

纯JavaScript逻辑 #

通过监听单选框的change事件，切换对应Div的显示状态：

// 获取所有单选框元素
const radios = document.querySelectorAll('input[name="contentSwitch"]');
// 获取两个目标Div
const div1 = document.getElementById('target1');
const div2 = document.getElementById('target2');

// 给每个单选框绑定事件
radios.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.value === 'target1') {
      div1.classList.remove('hidden');
      div2.classList.add('hidden');
    } else {
      div1.classList.add('hidden');
      div2.classList.remove('hidden');
    }
  });
});

核心要点 #

• 单选框的name属性必须一致，确保同一时间只能选中一个
• 初始状态通过checked属性设置默认选中项，对应Div默认显示
• 用classList操作类名来控制显示隐藏，比直接修改style.display更易维护

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