Question

我正在尝试阅读单选按钮的值。默认情况下会检查第一个无线电，我可以读取它的值。当我使用value="USA"检查第二个按钮时，它仍会返回value="UK"。

＆＃13;

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.");
  }
}

＆＃13;

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

＆＃13;

Answer 1

您的代码的问题是您在加载脚本时只执行一次。要使其响应并在每次进行新选择时触发alerts，您需要指定event listener并将您的函数作为对此侦听器的回调传递（或在回调中触发它）。

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" />

Answer 2

你需要把这一行：

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

你的功能内部。您正在设置变量并且永远不会更改它，因此无论您的默认检查值是什么，都是您永远坚持的。

进入函数后，它会在每次运行时更新变量。这将为您提供正确的结果。

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.");
    }
}

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

2 个答案: