如何在不添加onclick属性的情况下实现三态Toggle切换显示对应Div？

核心思路 #

利用事件监听（而非内联onclick），通过radio的change事件触发状态切换，结合DOM选择器控制对应div的显示/隐藏。无需修改原有HTML结构添加内联属性，仅需通过JS绑定事件即可实现。

步骤与代码示例 #

1. 约定HTML结构（示例）

假设你的HTML结构如下（可根据实际调整，关键是radio的value与div的标识对应）：

<!-- Radio组 -->
<div class="toggle-radio-group">
  <input type="radio" name="toggle-state" value="disabled" checked> Disabled
  <input type="radio" name="toggle-state" value="default"> Default
  <input type="radio" name="toggle-state" value="enabled"> Enabled
</div>

<!-- 状态对应的Div -->
<div class="toggle-content" data-state="disabled">禁用状态内容</div>
<div class="toggle-content" data-state="default">默认状态内容</div>
<div class="toggle-content" data-state="enabled">启用状态内容</div>

2. 基础CSS（控制默认隐藏）

先设置所有状态div默认隐藏，只显示初始选中的状态：

.toggle-content {
  display: none;
}
.toggle-content[data-state="disabled"] {
  display: block; /* 初始显示选中的状态 */
}

3. JS实现切换逻辑

有两种常用方式，选其一即可：

方式一：直接绑定radio的change事件

// 获取所有radio元素
const radioButtons = document.querySelectorAll('input[name="toggle-state"]');

// 遍历绑定change事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 获取当前选中的状态值
    const activeState = this.value;
    
    // 隐藏所有状态div
    document.querySelectorAll('.toggle-content').forEach(content => {
      content.style.display = 'none';
    });
    
    // 显示对应状态的div
    document.querySelector(`.toggle-content[data-state="${activeState}"]`).style.display = 'block';
  });
});

方式二：事件委托（更适合动态生成的radio）

如果radio是动态添加到页面的，推荐用事件委托，监听父元素的事件：

// 获取radio组的父容器
const radioGroup = document.querySelector('.toggle-radio-group');

radioGroup.addEventListener('change', function(e) {
  // 确保触发事件的是radio元素
  if (e.target.type === 'radio' && e.target.name === 'toggle-state') {
    const activeState = e.target.value;
    
    // 切换显示状态
    document.querySelectorAll('.toggle-content').forEach(content => {
      content.style.display = content.dataset.state === activeState ? 'block' : 'none';
    });
  }
});

优化说明 #

如果需要更优雅的样式切换，可以用添加/移除类名代替直接修改style.display，比如定义一个active类控制显示：

.toggle-content.active {
  display: block;
}

然后JS中替换为：

// 移除所有active类
document.querySelectorAll('.toggle-content').forEach(content => {
  content.classList.remove('active');
});
// 给对应div添加active类
document.querySelector(`.toggle-content[data-state="${activeState}"]`).classList.add('active');

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