JavaScript：单选按钮不存在/未选中时设默认值报错排查

我来帮你捋清楚问题出在哪哈！你遇到的Uncaught TypeError: Cannot read property 'value' of null错误，核心原因是你在尝试读取value属性前，没有先检查获取到的单选按钮元素是否为null。

举个例子，如果你的代码是类似这样的：

if (document.querySelector('input[name="color"]:checked').value) {
  // 使用选中值
} else {
  // 设置默认值
}

当单选按钮组不存在，或者存在但没有选中任何选项时，document.querySelector('input[name="color"]:checked')会返回null，这时候直接去访问null.value就会触发TypeError，导致代码中断，甚至连else分支都没法正常执行（你看到的else分支执行其实是错误抛出后的异常流程）。

正确的实现方式 #

我们需要先获取选中的单选按钮元素，先判断元素是否存在，再决定是使用选中值还是设置默认值，代码如下：

// 先获取选中的color单选按钮（不存在或未选中时返回null）
const selectedColor = document.querySelector('input[name="color"]:checked');
let colorValue;

if (selectedColor) {
  // 情况1：单选按钮组存在且有选中项，使用选中值
  colorValue = selectedColor.value;
} else {
  // 情况2：单选按钮组不存在，或者存在但未选中任何选项，设置默认值
  colorValue = "default_color"; // 替换成你需要的默认值，比如"red"
}

更细致的分支处理（可选） #

如果你需要单独区分“单选按钮组不存在”和“存在但未选中”这两种情况，可以先判断单选按钮组是否存在：

// 先检查单选按钮组是否存在
const colorRadioGroup = document.querySelectorAll('input[name="color"]');
let colorValue;

if (colorRadioGroup.length > 0) {
  // 单选按钮组存在，再找选中的项
  const selectedColor = document.querySelector('input[name="color"]:checked');
  if (selectedColor) {
    colorValue = selectedColor.value;
  } else {
    // 存在但未选中，设置默认值
    colorValue = "default_unchecked_color";
  }
} else {
  // 单选按钮组不存在，设置默认值
  colorValue = "default_no_group_color";
}

这样就能完美覆盖你需求中的所有场景，不会再出现TypeError错误啦！

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