javascript - 在 JS 中选中时，我无法读取非默认单选按钮的值

Question

我正在尝试读取单选按钮的值。默认选中第一个 radio ，我可以读取它的值。当我用 value="USA" 检查第二个按钮时，它仍然返回 value="UK"。

var countryName = document.querySelector("input[name=userCountry]:checked");

function adjustMeasurements() {
  if (countryName.value == "UK") {
    alert("User lives in UK.");
  } else {
    alert("User lives in USA.");
  }
}

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

Answer 1

您的代码的问题在于您只在加载脚本时执行一次。为了使其响应并在您每次进行新选择时触发您的警报，您需要指定一个事件监听器并将您的函数作为回调传递给该监听器(或触发器它在回调中)。

function adjustMeasurements(countryName) {
  if (countryName == "UK") {
    alert("User lives in UK.");
  } else {
    alert("User lives in USA.");
  }
}

const inputs = document.querySelectorAll('input');
inputs.forEach(item => {
  item.addEventListener('change', event => {
    adjustMeasurements(event.target.value);
  });
});

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

如果您的唯一目标是实现此功能 - 根据所选值提醒位置，那么您可以完全省略 adjustMeasurements 函数并仅执行此操作。

const inputs = document.querySelectorAll('input');

inputs.forEach(item => {
  item.addEventListener('change', event => {
    alert(`User lives in ${event.target.value}`)
  });
});

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