无法正确获取单选按钮选中值，取值反向且标签点击获双值求助

开发者阿泽

2026-5-19

嘿，别着急！折腾一整天确实够闹心的，我来帮你捋捋这个单选按钮的问题～

可能的问题排查与解决方案

1. 单选按钮的`name`属性没统一

单选按钮要实现互斥选择，必须拥有相同的name属性，这是核心！如果两个单选按钮的name不一样，浏览器会把它们当成完全独立的选项，不仅能同时选中，还会导致取值逻辑混乱。

正确的表单结构应该是这样的：

<form>
  <label for="courrier">Courrier</label>
  <input type="radio" id="courrier" name="delivery_method" value="Courrier">
  
  <label for="local">Local</label>
  <input type="radio" id="local" name="delivery_method" value="local">
</form>

这里两个单选按钮的name都是delivery_method，属于同一组，自然只能选一个。

2. `label`和单选按钮的关联出错

如果你的label的for属性和对应单选按钮的id不匹配，点击标签时就会触发错误的元素，甚至同时触发两个选项，导致你看到“点击标签获取两个值”的情况。比如for="courrier"必须严格对应单选按钮的id="courrier"，这样点击标签才会准确选中对应的按钮。

3. JavaScript取值逻辑搞反了

要是你的JS代码里直接按id判断选中状态，很容易搞反。正确的做法是通过name组来定位当前选中的单选按钮：

// 获取当前选中的配送方式单选按钮
const selectedOption = document.querySelector('input[name="delivery_method"]:checked');
if (selectedOption) {
  console.log('选中的值：', selectedOption.value);
} else {
  console.log('还没选中任何选项哦');
}

用name组加:checked伪类，能精准拿到当前选中的那个按钮，就不会出现值搞反的问题了。