在网页交互开发中，通过单选按钮控制HTML元素的显示与隐藏是高频需求，核心逻辑是监听单选按钮的选择状态变化，根据选中值修改目标元素的display或者visibility样式属性。下面先介绍具体的实现步骤和完整代码。
实现核心思路
整个功能的实现可以分为三个步骤：
- 在HTML中定义一组单选按钮，给每个单选按钮设置相同的name属性，同时设置不同的value值用于区分选择状态，再给每个单选按钮绑定onchange事件或者统一监听name对应的单选按钮组变化。
- 定义需要控制显示隐藏的目标HTML元素，给这些元素设置唯一的id或者统一的类用于获取。
- 编写JavaScript函数，在函数中获取当前选中的单选按钮的value值，根据value值判断需要显示哪些元素、隐藏哪些元素，通过修改元素的style.display属性来完成切换。
完整代码示例
以下是一个完整的示例，包含三个单选按钮，分别对应显示三个不同的div元素，每次只能显示一个元素，其余元素自动隐藏：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选按钮控制元素显示隐藏</title>
<style>
.content-box {
width: 200px;
height: 100px;
margin-top: 20px;
border: 1px solid #ccc;
line-height: 100px;
text-align: center;
}
#box1 {
background-color: #f0f0f0;
}
#box2 {
background-color: #e0e0e0;
}
#box3 {
background-color: #d0d0d0;
}
</style>
</head>
<body>
<h3>请选择要显示的内容：</h3>
<!-- 单选按钮组，name相同保证只能选一个 -->
<input type="radio" name="showOption" value="box1" onchange="toggleDisplay()"> 显示内容一
<input type="radio" name="showOption" value="box2" onchange="toggleDisplay()"> 显示内容二
<input type="radio" name="showOption" value="box3" onchange="toggleDisplay()"> 显示内容三
<!-- 需要控制显示隐藏的元素 -->
<div id="box1" class="content-box">这是内容一</div>
<div id="box2" class="content-box" style="display: none;">这是内容二</div>
<div id="box3" class="content-box" style="display: none;">这是内容三</div>
<script>
function toggleDisplay() {
// 获取所有name为showOption的单选按钮
const radioList = document.querySelectorAll('input[name="showOption"]');
let selectedValue = '';
// 遍历单选按钮，找到选中的那个
radioList.forEach(radio => {
if (radio.checked) {
selectedValue = radio.value;
}
});
// 获取所有内容元素
const box1 = document.getElementById('box1');
const box2 = document.getElementById('box2');
const box3 = document.getElementById('box3');
// 先隐藏所有元素
box1.style.display = 'none';
box2.style.display = 'none';
box3.style.display = 'none';
// 根据选中的值显示对应元素
if (selectedValue === 'box1') {
box1.style.display = 'block';
} else if (selectedValue === 'box2') {
box2.style.display = 'block';
} else if (selectedValue === 'box3') {
box3.style.display = 'block';
}
}
</script>
</body>
</html>
关键知识点说明
单选按钮的事件绑定
示例中给每个单选按钮都绑定了onchange事件，当单选按钮的选中状态发生变化时就会触发toggleDisplay函数。也可以选择给单选按钮组统一绑定事件，通过监听父元素的事件委托来实现，适合动态生成单选按钮的场景。
元素显示隐藏的实现方式
控制元素显示隐藏最常用的两个样式属性是display和visibility：
display: none会让元素完全从文档流中移除，不占据页面空间，设置为display: block或者对应布局的display值即可重新显示。visibility: hidden只会让元素不可见，但仍然会占据原来的页面空间，设置为visibility: visible即可重新显示。
示例中使用的是display属性，更符合大多数场景下切换显示隐藏的需求。
获取选中单选按钮的方式
除了示例中遍历所有单选按钮判断checked属性的方式，还可以通过document.querySelector('input[name="showOption"]:checked')直接获取选中的单选按钮，代码会更简洁：
function toggleDisplay() {
// 直接获取选中的单选按钮
const selectedRadio = document.querySelector('input[name="showOption"]:checked');
if (!selectedRadio) {
return; // 没有选中的情况直接返回
}
const selectedValue = selectedRadio.value;
// 后续逻辑和示例一致
}
常见问题与优化
如果需要在页面加载时默认选中某个单选按钮并显示对应元素，可以在HTML中给对应单选按钮添加checked属性，并且在页面加载完成后调用一次toggleDisplay函数：
// 页面加载完成后执行一次切换函数，保证初始状态和选中状态一致
window.onload = function() {
toggleDisplay();
}
同时给第一个单选按钮添加checked属性：
<input type="radio" name="showOption" value="box1" onchange="toggleDisplay()" checked> 显示内容一
这样就可以实现页面加载时默认显示第一个内容的效果。
JavaScript单选按钮HTML元素显示隐藏onchange事件修改时间：2026-06-24 11:27:23