如何用JavaScript的onChange事件获取单选按钮值？getElementById关联失效

云上老周

2026-5-26

解决你的单选按钮JavaScript问题

Hey there! Let's work through these two radio button issues you're facing step by step, with fixed code and clear explanations.

问题1：`getElementById`操作单选按钮功能失效

你的代码里有几个小细节出错了，导致功能没生效：

事件绑定写法错误：HTML里的onChange="(checkGender)"是无效的，应该写成onChange="checkGender(event)"（要调用函数，不是把函数名放在括号里）
逻辑未封装为函数：你原来的JavaScript代码是直接执行的，没有放进checkGender函数里，所以触发onChange时找不到对应的处理逻辑
拼写失误：代码里的"Femmale"应该是"Female"

问题2：通过`onChange`事件获取单选按钮的值

其实不用逐个判断每个单选按钮的checked状态，有更简洁的方式：可以通过事件对象直接拿到当前选中按钮的值，或者通过name属性遍历同组按钮找到选中项。

修正后的完整代码

HTML部分

<div class="radio">
  <label>
    <input type="radio" name="gender" onChange="checkGender(event)" id="male" value="Male">
    Male
  </label>
  <label>
    <input type="radio" name="gender" onChange="checkGender(event)" id="female" value="Female">
    Female
  </label>
</div>
<!-- 用来展示选中结果的元素 -->
<p id="gender2"></p>

JavaScript部分

function checkGender(event) {
  // 方法1：通过事件对象直接获取当前选中的值（最简洁）
  const selectedGender = event.target.value;
  document.getElementById('gender2').innerHTML = selectedGender;

  // 方法2：如果不想用事件对象，也可以遍历同组单选按钮找选中项
  // const genderRadios = document.getElementsByName('gender');
  // for (let radio of genderRadios) {
  //   if (radio.checked) {
  //     document.getElementById('gender2').innerHTML = radio.value;
  //     break;
  //   }
  // }
}