JavaScript中无法读取非默认选中单选按钮的值该如何解决？

嘿，我一眼就看出问题所在啦！

你当前的代码里，var countryName = document.querySelector("input[name=userCountry]:checked"); 这条语句是写在函数外面的。页面加载完成时，它就会获取到默认选中的value="UK"的单选按钮，并且这个变量的值之后就不会自动更新了——哪怕你切换到了USA的选项，countryName依然指向最初的那个UK按钮，所以函数里始终返回UK的值。

修复方案 #

把获取当前选中单选按钮的代码移到adjustMeasurements函数内部，这样每次调用函数时，都会重新查询当前处于选中状态的按钮，就能拿到正确的值了。

修改后的JavaScript代码 #

function adjustMeasurements() {
  // 每次调用函数时，重新获取当前选中的单选按钮
  var countryName = document.querySelector("input[name=userCountry]:checked");
  if (countryName.value == "UK") {
    alert("User lives in UK.");
  } else {
    alert("User lives in USA.");
  }
}

对应的HTML（无需修改，保持原样即可） #

<input type="radio" name="userCountry" value="UK" checked="checked" required="required" />
<input type="radio" name="userCountry" value="USA" />

额外小提示 #

如果希望切换单选按钮时自动触发这个函数，可以给单选按钮绑定change事件：

<input type="radio" name="userCountry" value="UK" checked="checked" required="required" onchange="adjustMeasurements()" />
<input type="radio" name="userCountry" value="USA" onchange="adjustMeasurements()" />

这样用户切换选项时，就会立刻弹出对应的提示啦～

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