原生JS实现单选按钮控制对应元素显示切换的问题

先说说你之前尝试里的问题所在，这样能避免再踩同样的坑：

• 第一个方案里，document.getElementById("hidden_elements")获取的是单个DOM元素（不是集合），所以hide.length是undefined，循环根本不会执行；另外document.getElementsByName(this.value)返回的是元素集合，你直接给集合加.style.display是无效的，得遍历集合或者定位到单个元素。
• 第二个方案里，你给多个div用了相同的id="hidden_element"，这违反了HTML规则——ID必须是唯一的，所以getElementById永远只能拿到第一个匹配的元素，后面的元素根本无法被选中。

下面是完整的可行方案，完全用原生JS实现：

步骤1：正确的HTML结构 #

我们给每个单选按钮设置相同的name（保证单选互斥），value对应要显示元素的唯一ID；同时给每个要控制的元素设置唯一ID，初始用CSS隐藏：

<!-- 单选按钮组 -->
<label>
  <input type="radio" name="itemSelector" value="item1"> Item 1
</label>
<label>
  <input type="radio" name="itemSelector" value="item2"> Item 2
</label>
<label>
  <input type="radio" name="itemSelector" value="item3"> Item 3
</label>

<!-- 要控制显示的元素组 -->
<div id="item1" class="hidden-element">
  Input 1: <input type="text" placeholder="仅选中Item1时显示">
</div>
<div id="item2" class="hidden-element">
  Input 2: <input type="text" placeholder="仅选中Item2时显示">
</div>
<div id="item3" class="hidden-element">
  Input 3: <input type="text" placeholder="仅选中Item3时显示">
</div>

<style>
/* 初始隐藏所有目标元素 */
.hidden-element {
  display: none;
  margin: 10px 0;
}
</style>

步骤2：原生JS逻辑实现 #

我们需要给每个单选按钮绑定点击事件，每次点击时先隐藏所有目标元素，再显示当前选中项对应的元素：

// 获取所有单选按钮
const radioButtons = document.querySelectorAll('input[name="itemSelector"]');
// 获取所有需要控制的元素
const targetElements = document.querySelectorAll('.hidden-element');

// 定义点击事件处理函数
function handleRadioClick() {
  // 先隐藏所有目标元素
  targetElements.forEach(element => {
    element.style.display = 'none';
  });
  // 找到当前选中值对应的元素并显示
  const activeElement = document.getElementById(this.value);
  if (activeElement) {
    activeElement.style.display = 'block';
  }
}

// 给每个单选按钮绑定点击事件
radioButtons.forEach(radio => {
  radio.addEventListener('click', handleRadioClick);
});

关键知识点说明 #

• 用querySelectorAll获取元素集合，方便批量操作；
• 利用单选按钮的value和目标元素的id做对应，逻辑清晰且易于维护；
• 每次点击先隐藏所有元素，再显示目标元素，避免多个元素同时显示的问题；
• 遵循HTML规则：ID唯一，单选按钮组用相同name保证互斥。

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