求助：实现选中radio button时自动显示指定div的方法

阿华AIGC实验室

2026-5-20

我太懂这种需求了——不想靠提交表单来触发内容切换，就想点单选按钮的瞬间就能看到对应的内容，对吧？其实用原生JavaScript就能完美解决，完全不需要依赖表单提交或者第三方框架，我给你一套现成的实现方案，直接就能用：

实现方案拆解

1. 构建基础HTML结构

我们给每个单选按钮加上data-target属性，用来关联它对应的内容div的ID，这样逻辑会更清晰：

<!-- 单选按钮组 -->
<div class="radio-group">
  <label>
    <input type="radio" name="contentSwitcher" value="profile" data-target="profileContent" checked>
    个人信息
  </label>
  <label>
    <input type="radio" name="contentSwitcher" value="settings" data-target="settingsContent">
    账户设置
  </label>
  <label>
    <input type="radio" name="contentSwitcher" value="history" data-target="historyContent">
    浏览历史
  </label>
</div>

<!-- 对应内容区域 -->
<div id="profileContent" class="content-panel">
  <h3>个人信息</h3>
  <p>这里展示你的姓名、邮箱等个人资料</p>
</div>
<div id="settingsContent" class="content-panel">
  <h3>账户设置</h3>
  <p>可以修改密码、绑定手机号等</p>
</div>
<div id="historyContent" class="content-panel">
  <h3>浏览历史</h3>
  <p>记录你最近访问过的页面</p>
</div>

2. CSS控制初始隐藏与显示状态

先把所有内容面板默认隐藏，只有选中对应的单选按钮时，才给目标面板加active类来显示：

.content-panel {
  display: none;
  margin-top: 20px;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #f9f9f9;
}

/* 激活状态的内容面板显示出来 */
.content-panel.active {
  display: block;
}

3. JavaScript实现实时切换逻辑

我们给每个单选按钮绑定change事件，一旦单选按钮被选中，就立刻切换对应的内容面板，同时处理页面初始加载时默认选中的情况：

// 页面加载完成后执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有单选按钮和内容面板
  const radioButtons = document.querySelectorAll('input[name="contentSwitcher"]');
  const contentPanels = document.querySelectorAll('.content-panel');

  // 定义切换内容的核心函数
  function showTargetPanel(targetId) {
    // 先隐藏所有内容面板
    contentPanels.forEach(panel => {
      panel.classList.remove('active');
    });
    // 显示目标面板
    const targetPanel = document.getElementById(targetId);
    if (targetPanel) {
      targetPanel.classList.add('active');
    }
  }

  // 给每个单选按钮绑定切换事件
  radioButtons.forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.checked) {
        showTargetPanel(this.dataset.target);
      }
    });
  });

  // 页面初始化时，显示默认选中的内容
  const defaultCheckedRadio = document.querySelector('input[name="contentSwitcher"]:checked');
  if (defaultCheckedRadio) {
    showTargetPanel(defaultCheckedRadio.dataset.target);
  }
});