获取单选按钮值添加到innerHTML时遇Undefined/NodeList错误求助

我来帮你搞定这个单选按钮取值的问题！你遇到的undefined或者NodeList错误，大多是因为没正确筛选出选中的单选按钮，咱们一步一步来解决：

先搞懂错误原因 #

• 如果你用document.querySelectorAll('input[type="radio"]')获取单选按钮，得到的是一个NodeList对象（类似数组的元素集合），直接取它的value肯定不对，因为这不是单个元素
• 要是用getElementById，但单选按钮组没有唯一ID，或者没判断该按钮是否被选中，也会拿到undefined

正确的解决方案 #

1. 先补全你的表单结构（单选按钮组要统一name） #

首先确保你的单选按钮组有相同的name属性（这是HTML单选按钮互斥的核心规则），补全后的表单示例：

<form>
  <input type="text" id="name" onChange="mySummary();" placeholder="输入姓名" />
  <input type="text" id="phone" onChange="mySummary();" placeholder="输入电话" />
  
  <!-- 单选按钮组：name属性一致，每个按钮有不同value -->
  <input type="radio" name="gender" value="male" onChange="mySummary();" /> 男
  <input type="radio" name="gender" value="female" onChange="mySummary();" /> 女
  
  <!-- 用来展示结果的文本区域 -->
  <textarea id="summary" rows="5" cols="50"></textarea>
</form>

2. 修正mySummary函数，正确获取单选按钮值 #

重点是筛选出被选中的那个单选按钮，并处理未选中的情况避免错误：

function mySummary() {
  // 获取文本框的值，这部分你之前应该是对的
  const name = document.getElementById('name').value;
  const phone = document.getElementById('phone').value;
  
  // 关键：用querySelector筛选出选中的单选按钮
  // 语法：input[name="你的单选按钮组name"]:checked
  const selectedRadio = document.querySelector('input[name="gender"]:checked');
  
  // 处理用户没选单选按钮的情况，避免undefined
  const gender = selectedRadio ? selectedRadio.value : '未选择性别';
  
  // 组装内容并插入到文本区域（这里用value更合适，textarea的value就是内容，innerHTML也可以但value更规范）
  const summaryContent = `姓名：${name}\n联系电话：${phone}\n性别：${gender}`;
  document.getElementById('summary').value = summaryContent;
}

关键要点提醒 #

• 单选按钮组必须共享同一个name属性，否则无法实现互选功能
• 用:checked伪类是快速定位选中项的最优方式，querySelector会直接返回第一个匹配的元素（单选组只会有一个选中项）
• 一定要判断选中元素是否存在，不然用户没选单选按钮时，直接调用selectedRadio.value会抛出错误

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