在前端表单开发中，根据单选按钮的选中状态动态展示对应文本是一个很常见的需求，实现的核心逻辑是监听单选按钮的选中变化，获取选中项的值后匹配对应的文本并渲染到页面中。
实现思路
整个功能的实现分为三个步骤：
- 使用HTML搭建单选按钮组和用于展示文本的容器结构
- 为所有单选按钮绑定 change 事件，监听选中状态的变化
- 在事件回调中获取当前选中的单选按钮的值，匹配对应文本后更新展示容器内容
完整代码示例
下面是原生HTML和JavaScript实现的完整代码，所有特殊字符都已经做了转义处理：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选按钮选中显示文本</title>
</head>
<body>
<!-- 单选按钮组 -->
<div class="radio-group">
<label>
<input type="radio" name="fruit" value="apple"> 苹果
</label>
<label>
<input type="radio" name="fruit" value="banana"> 香蕉
</label>
<label>
<input type="radio" name="fruit" value="orange"> 橙子
</label>
</div>
<!-- 文本展示容器 -->
<div id="showText"></div>
<script>
// 定义值对应的文本映射
const textMap = {
apple: '你选择的水果是苹果，苹果富含维生素和膳食纤维',
banana: '你选择的水果是香蕉，香蕉含有丰富的钾元素',
orange: '你选择的水果是橙子，橙子维生素C含量很高'
};
// 获取所有单选按钮和展示容器
const radioList = document.querySelectorAll('input[name="fruit"]');
const showTextEle = document.getElementById('showText');
// 遍历单选按钮绑定change事件
radioList.forEach(radio => {
radio.addEventListener('change', function() {
// 判断当前单选按钮是否被选中
if (this.checked) {
// 获取选中值对应的文本，没有匹配则显示默认内容
const showContent = textMap[this.value] || '暂未匹配到对应文本';
showTextEle.textContent = showContent;
}
});
});
</script>
</body>
</html>关键注意点
在实现过程中有几个细节需要注意：
- 同一组的单选按钮需要设置相同的
name属性，才能保证单选效果 - 事件监听建议使用 change 事件而不是 click 事件，change 事件只有在选中状态实际变化的时候才会触发，更符合交互逻辑
- 如果页面初始有默认选中的单选按钮，可以在页面加载完成后主动触发一次事件回调，初始化展示文本
扩展场景
如果需要支持更复杂的文本展示，比如不同选中项展示不同结构的HTML内容，可以把 textContent 换成 innerHTML，但要注意做好内容的安全校验，避免XSS风险。如果是使用Vue、React等框架开发，也可以基于框架的响应式特性实现，原理和原生实现是一致的，只是状态管理的方式不同。
radioJavaScriptHTML事件监听状态显示修改时间：2026-06-04 18:13:35