如何在选中特定Radio Button时展示对应文本值？

HTML 基础结构 #

先创建单选按钮组（用相同的name属性确保单选互斥），以及用于显示文本的容器：

<div class="gender-group">
  <input type="radio" name="gender" id="male" value="male">
  <label for="male">Male</label>
  
  <input type="radio" name="gender" id="female" value="female">
  <label for="female">Female</label>
</div>

<!-- 用于展示切换文本的区域 -->
<div id="text-display"></div>

JavaScript 实现逻辑 #

方式1：逐个绑定事件（直观易懂） #

直接给每个单选按钮绑定change事件，选中时更新文本内容：

// 获取页面元素
const maleRadio = document.getElementById('male');
const femaleRadio = document.getElementById('female');
const textDisplay = document.getElementById('text-display');

// 绑定male按钮的切换事件
maleRadio.addEventListener('change', function() {
  if (this.checked) {
    textDisplay.textContent = "Hi, I'm male";
  }
});

// 绑定female按钮的切换事件
femaleRadio.addEventListener('change', function() {
  if (this.checked) {
    textDisplay.textContent = "Hi, I'm female";
  }
});

方式2：事件委托（更高效，适合扩展） #

通过监听父容器的事件，统一处理所有单选按钮的切换，后续新增选项时无需额外绑定事件：

const textDisplay = document.getElementById('text-display');

// 监听单选按钮组的change事件
document.querySelector('.gender-group').addEventListener('change', function(e) {
  const target = e.target;
  // 确保触发事件的是目标单选按钮
  if (target.type === 'radio' && target.name === 'gender') {
    switch(target.value) {
      case 'male':
        textDisplay.textContent = "Hi, I'm male";
        break;
      case 'female':
        textDisplay.textContent = "Hi, I'm female";
        break;
    }
  }
});

可选优化：默认选中与初始文本 #

如果需要页面加载时默认选中某个选项并显示对应文本，只需给目标单选按钮添加checked属性，再主动触发一次change事件：

<!-- 给male按钮添加默认选中 -->
<input type="radio" name="gender" id="male" value="male" checked>

// 页面加载完成后，触发选中项的change事件
window.addEventListener('load', function() {
  const checkedRadio = document.querySelector('input[name="gender"]:checked');
  if (checkedRadio) {
    checkedRadio.dispatchEvent(new Event('change'));
  }
});

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