在很多表单交互场景中，我们需要把一组单选按钮水平排列，并且当选中某个选项时，在页面中实时显示对应的文本信息。下面我们就来一步步实现这个完整的方案。
一、基础HTML结构搭建
首先我们需要创建一组单选按钮，并且让它们水平排列。这里使用<input type="radio">标签，并且给同一组的单选按钮设置相同的name属性，保证同一时间只能选中一个。水平排列可以通过CSS的flex布局实现。
<!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>
/* 水平排列单选按钮容器 */
.radio-group {
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 15px;
}
.radio-item {
display: flex;
align-items: center;
gap: 5px;
}
/* 显示选中文本的容器 */
#selected-text {
margin-top: 10px;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="option1" name="fruit" value="苹果">
<label for="option1">苹果</label>
</div>
<div class="radio-item">
<input type="radio" id="option2" name="fruit" value="香蕉">
<label for="option2">香蕉</label>
</div>
<div class="radio-item">
<input type="radio" id="option3" name="fruit" value="橙子">
<label for="option3">橙子</label>
</div>
</div>
<div id="selected-text">当前选中的水果：无</div>
</body>
</html>二、JavaScript事件监听实现
接下来需要给所有单选按钮绑定change事件，当某个单选按钮被选中时，获取它对应的value值，然后更新显示文本的容器内容。
// 获取所有单选按钮元素
const radioButtons = document.querySelectorAll('input[name="fruit"]');
// 获取显示文本的容器
const selectedTextContainer = document.getElementById('selected-text');
// 遍历所有单选按钮，绑定change事件
radioButtons.forEach(radio => {
radio.addEventListener('change', function() {
// 判断当前单选按钮是否被选中
if (this.checked) {
// 更新显示文本，this.value就是当前选中单选按钮的value值
selectedTextContainer.textContent = `当前选中的水果：${this.value}`;
}
});
});三、完整示例代码
把上面的HTML、CSS和JavaScript结合起来，就是完整的水平显示方案，直接保存为html文件就可以运行查看效果。
<!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>
.radio-group {
display: flex;
gap: 20px;
align-items: center;
margin-bottom: 15px;
}
.radio-item {
display: flex;
align-items: center;
gap: 5px;
}
#selected-text {
margin-top: 10px;
color: #333;
font-size: 16px;
}
</style>
</head>
<body>
<div class="radio-group">
<div class="radio-item">
<input type="radio" id="option1" name="fruit" value="苹果">
<label for="option1">苹果</label>
</div>
<div class="radio-item">
<input type="radio" id="option2" name="fruit" value="香蕉">
<label for="option2">香蕉</label>
</div>
<div class="radio-item">
<input type="radio" id="option3" name="fruit" value="橙子">
<label for="option3">橙子</label>
</div>
</div>
<div id="selected-text">当前选中的水果：无</div>
<script>
const radioButtons = document.querySelectorAll('input[name="fruit"]');
const selectedTextContainer = document.getElementById('selected-text');
radioButtons.forEach(radio => {
radio.addEventListener('change', function() {
if (this.checked) {
selectedTextContainer.textContent = `当前选中的水果：${this.value}`;
}
});
});
</script>
</body>
</html>四、注意事项
- 同一组单选按钮必须设置相同的name属性，否则无法实现互斥选中效果。
- 如果使用flex布局实现水平排列，注意容器的宽度是否足够，避免内容被挤压换行。
- 如果需要默认选中某个选项，可以在对应的
<input>标签上添加checked属性。 - 如果单选按钮是动态生成的，需要使用事件委托来绑定change事件，避免事件失效。
htmlradio_buttonjavascriptdom操作修改时间：2026-05-26 20:00:59