单选按钮（radio button）切换显示组件失效问题咨询

先排查你代码里的几个常见问题：

• 单选按钮的name属性是否统一？不统一的话无法实现互斥选中，切换逻辑自然失效
• 有没有给单选按钮绑定change事件？如果没监听状态变化，选中后不会触发切换动作
• 控制内容显示隐藏的逻辑是否正确？比如DOM选择器写错、样式控制方式不对

下面是修正后的完整代码示例，直接套用就能实现预期效果：

HTML 结构 #

<!-- 单选按钮组 -->
<div class="search-type-switch">
  <label>
    <input type="radio" name="searchType" value="person" checked> 个人搜索
  </label>
  <label>
    <input type="radio" name="searchType" value="company"> 企业搜索
  </label>
</div>

<!-- 搜索组件容器 -->
<div id="personSearch" class="search-panel">
  <input type="text" placeholder="输入姓名搜索">
  <button>搜索个人</button>
</div>
<div id="companySearch" class="search-panel hidden">
  <input type="text" placeholder="输入企业名称搜索">
  <button>搜索企业</button>
</div>

CSS 样式 #

.hidden {
  display: none;
}

/* 可选：给组件加一点基础样式，提升观感 */
.search-type-switch {
  margin-bottom: 10px;
}
.search-panel {
  padding: 10px;
  border: 1px solid #eee;
}

JavaScript 逻辑 #

// 获取DOM元素
const radioButtons = document.querySelectorAll('input[name="searchType"]');
const personPanel = document.getElementById('personSearch');
const companyPanel = document.getElementById('companySearch');

// 定义切换面板的核心逻辑
function switchSearchPanel() {
  const selectedType = document.querySelector('input[name="searchType"]:checked').value;
  // 根据选中值切换面板显示状态
  if (selectedType === 'person') {
    personPanel.classList.remove('hidden');
    companyPanel.classList.add('hidden');
  } else {
    personPanel.classList.add('hidden');
    companyPanel.classList.remove('hidden');
  }
}

// 给所有单选按钮绑定切换事件
radioButtons.forEach(radio => {
  radio.addEventListener('change', switchSearchPanel);
});

// 页面加载完成后初始化面板状态
switchSearchPanel();

关键注意点 #

1. 单选按钮必须设置相同的name属性，这是实现互斥选中的核心
2. 使用change事件而不是click事件，因为单选按钮的状态变化才是触发切换的关键（比如用键盘切换选中状态时，click事件不会触发，但change会）
3. 用CSS类控制显示隐藏，比起直接修改style.display，后续维护样式更方便
4. 页面初始化时手动调用一次切换函数，确保默认选中的单选按钮对应面板能正确显示

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