获取单选框选中值时出现Uncaught TypeError错误求助

问题根源 #

1. label未关联单选框：你的<label>标签for属性为空，既不符合表单语义规范，也导致点击文字无法选中对应单选框。
2. 未处理未选中场景：当没有任何单选框被选中时，document.querySelector('input[name=soda]:checked')会返回null，直接访问null.value就会触发你看到的TypeError。

修正步骤 #

1. 修复HTML的label关联 #

将<label>的for属性对应到单选框的id，提升交互体验和语义正确性：

<p>Pepsi or Coke?</p>
<input type="radio" id="pepsi" name="soda" value="1">
<label for="pepsi">Pepsi</label>
<input type="radio" id="coke" name="soda" value="2">
<label for="coke">Coke</label>
<!-- 添加触发按钮，用于执行获取操作 -->
<button id="saveBtn">确认选择</button>

2. 安全获取单选框值并存入数组 #

修改JavaScript代码，先判断是否有选中项，再处理值的转换和数组存储：

// 初始化存储数组
const selectedSodas = [];
// 获取触发按钮
const saveBtn = document.getElementById('saveBtn');

saveBtn.addEventListener('click', () => {
  // 获取选中的单选框元素
  const checkedItem = document.querySelector('input[name="soda"]:checked');
  
  if (checkedItem) {
    // 转换为数字并存入数组
    const value = Number(checkedItem.value);
    selectedSodas.push(value);
    console.log('当前选中值:', value);
    console.log('已存储的数组:', selectedSodas);
  } else {
    console.log('请先选择一款汽水');
  }
});

额外优化：实时监听选中状态 #

如果不需要按钮触发，也可以监听单选框的change事件，实时获取选中值：

const selectedSodas = [];
// 获取所有soda单选框
const sodaRadios = document.querySelectorAll('input[name="soda"]');

sodaRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    if (radio.checked) {
      const value = Number(radio.value);
      // 若需仅保留当前选中值，可先清空数组
      selectedSodas.length = 0;
      selectedSodas.push(value);
      console.log('实时选中值:', value);
      console.log('已存储的数组:', selectedSodas);
    }
  });
});

注意：确保JS代码在DOM加载完成后执行，可将代码放在</body>标签前，或用DOMContentLoaded事件包裹。

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