JavaScript中如何通过单选按钮控制HTML元素显隐

在网页交互开发中，通过单选按钮切换不同选项时，动态显示对应内容区域、隐藏其他区域是高频需求，比如表单中根据用户选择的身份类型展示不同的填写字段。这种功能的实现核心是通过JavaScript监听单选按钮的状态变化，再修改目标元素的显示属性。

基础HTML结构搭建

首先需要构建单选按钮组和需要控制显隐的元素，单选按钮需要设置相同的name属性保证互斥选择，同时给每个单选按钮添加唯一的value用于区分选项，目标元素设置对应的标识方便后续选择。

<!-- 单选按钮组 -->
<div class="radio-group">
  <label>
    <input type="radio" name="showType" value="content1" checked> 显示内容一
  </label>
  <label>
    <input type="radio" name="showType" value="content2"> 显示内容二
  </label>
  <label>
    <input type="radio" name="showType" value="content3"> 显示内容三
  </label>
</div>

<!-- 需要控制显隐的内容区域 -->
<div id="content1" class="content-box">这是第一个内容区域</div>
<div id="content2" class="content-box" style="display:none;">这是第二个内容区域</div>
<div id="content3" class="content-box" style="display:none;">这是第三个内容区域</div>

JavaScript逻辑实现

事件监听绑定

可以通过给单选按钮组绑定onchange事件，监听用户的选择变化，也可以给每个单选按钮单独绑定事件，这里推荐使用事件委托的方式，减少事件绑定的数量，提升性能。

// 获取单选按钮组的容器
const radioGroup = document.querySelector('.radio-group');
// 获取所有需要控制显隐的内容元素
const contentBoxes = document.querySelectorAll('.content-box');

// 给单选按钮组绑定change事件
radioGroup.addEventListener('change', function(e) {
  // 判断触发事件的是否是单选按钮
  if (e.target.type === 'radio') {
    // 获取当前选中的单选按钮的value值
    const selectedValue = e.target.value;
    // 遍历所有内容元素，根据id匹配显示对应元素
    contentBoxes.forEach(box => {
      if (box.id === selectedValue) {
        box.style.display = 'block';
      } else {
        box.style.display = 'none';
      }
    });
  }
});

初始状态处理

页面加载时，需要保证默认选中的单选按钮对应的内容区域显示，其他区域隐藏，上面的HTML结构中已经给第一个单选按钮添加了checked属性，同时给非默认显示的内容区域设置了display:none，即可保证初始状态正确。

其他实现方式

通过checked属性主动判断

如果不想使用事件委托，也可以给每个单选按钮单独绑定事件，通过判断checked属性来处理显隐逻辑。

// 获取所有单选按钮
const radioBtns = document.querySelectorAll('input[name="showType"]');
// 获取所有内容元素
const contentBoxes = document.querySelectorAll('.content-box');

// 给每个单选按钮绑定change事件
radioBtns.forEach(btn => {
  btn.addEventListener('change', function() {
    // 如果当前单选按钮被选中
    if (this.checked) {
      // 遍历内容元素，匹配id显示对应元素
      contentBoxes.forEach(box => {
        box.style.display = box.id === this.value ? 'block' : 'none';
      });
    }
  });
});

注意事项

• 单选按钮的name属性必须一致，否则无法实现互斥选择的效果。
• 控制显隐时，除了使用display属性，也可以使用visibility属性，两者的区别是display:none会让元素脱离文档流，visibility:hidden只会隐藏元素但保留占位。
• 如果页面是动态渲染的单选按钮和内容区域，需要保证JavaScript代码在DOM元素加载完成后执行，可以将脚本放在页面底部，或者使用DOMContentLoaded事件包裹逻辑。
• 如果内容区域有默认隐藏的需求，不要使用hidden属性，因为hidden属性的优先级高于display样式，会导致后续样式修改不生效。

兼容说明

上述实现方式使用的addEventListener、querySelector等API兼容所有现代浏览器，如果需要兼容IE8及以下版本，需要将querySelector替换为getElementById、getElementsByTagName等方法，addEventListener替换为attachEvent。

JavaScriptHTML单选按钮元素显隐onchange修改时间：2026-07-05 11:06:22