如何获取选中单选按钮的值？解决TypeError报错问题

错误原因分析 #

你遇到的TypeError: Cannot read properties of null (reading 'value')，是因为页面初始化时没有任何单选按钮被默认选中，document.querySelector('input[name="example"]:checked')返回了null，直接访问null的value属性自然会触发报错。

完整解决方案（带分步解释） #

1. 处理初始值获取（避免报错）

先判断是否存在选中的单选按钮，再获取值：

// 先获取选中的单选按钮元素
const checkedRadio = document.querySelector('input[name="example"]:checked');
// 用三元运算符做容错处理：有选中项就取value，否则返回提示文本
let valueName = checkedRadio ? checkedRadio.value : '未选中任何选项';
console.log(valueName);

如果希望页面加载时默认选中一个选项，直接给对应单选按钮加checked属性即可：

<input type='radio' value='value1' name='example' id='value1' checked>
<label for='value1'>Value 1</label>
<input type='radio' value='value2' name='example' id='value2'>
<label for='value2'>Value 2</label>
<input type='radio' value='value3' name='example' id='value3'>
<label for='value3'>Value 3</label>

2. 添加选择切换事件监听

监听单选按钮的change事件，用户切换选择时自动打印选中值，有两种实现方式：

方式一：给每个单选按钮绑定事件（适合新手理解）

// 获取同组所有单选按钮
const radioButtons = document.querySelectorAll('input[name="example"]');

// 遍历每个按钮，添加change事件监听
radioButtons.forEach(radio => {
  radio.addEventListener('change', function() {
    // 单选按钮组中只有选中的按钮会触发change事件，直接打印值即可
    console.log('当前选中的值：', this.value);
  });
});

方式二：事件委托（更高效，适合大量按钮场景）

给单选按钮的父容器绑定事件，利用事件冒泡特性监听子元素的变化：

<!-- 先给单选按钮套一个父容器 -->
<div id="radio-group">
  <input type='radio' value='value1' name='example' id='value1'>
  <label for='value1'>Value 1</label>
  <input type='radio' value='value2' name='example' id='value2'>
  <label for='value2'>Value 2</label>
  <input type='radio' value='value3' name='example' id='value3'>
  <label for='value3'>Value 3</label>
</div>

// 获取父容器
const radioGroup = document.getElementById('radio-group');

// 给父容器添加change事件监听
radioGroup.addEventListener('change', function(e) {
  // 判断触发事件的元素是否是目标单选按钮
  if (e.target.type === 'radio' && e.target.name === 'example') {
    console.log('当前选中的值：', e.target.value);
  }
});

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