是否有JavaScript函数来确定检查哪个无线电输入并使用该无线电输入的值发出警报？[副本]

Question

理论上，我可以使用for循环在各种无线电输入上循环，以查看哪个已检查，然后警告已检查无线电输入的值，但该功能仅在选择第一个无线电输入时起作用。

我的最终目标是为客户建立一个报价表，但我在第一个障碍上遇到了困难。使用“警报”是唯一看到任何结果的尝试（我尝试了console.log、console.dir等，我已经使用chrome控制台/调试器工作了数小时，但没有任何效果。如果我有一个带有默认检查（checked=“checked”）的收音机，它也会失败，除非它是我选择的第一个无线电输入）。甚至下面的JS也是我在StackOverflow上发现的一个问题（不是重复的），OP声称它可以工作。

const radioButtonValue = radioName => {
      var radioButtons = document.getElementsByName(radioName);
      for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) {
          return radioButtons[i].value;
        } else {
          return "no value";
        }
      }
    };

    const getValues = () => {
      var distance = radioButtonValue("distanceInput");
      alert(distance);
    };

<form>
      <input name="distanceInput" type="radio" value="d1" />0-9km
      <input name="distanceInput" type="radio" value="d2" />10-19km
      <input name="distanceInput" type="radio" value="d3" />20-29km
      <input name="distanceInput" type="radio" value="d4" />30-39km
      <input name="distanceInput" type="radio" value="d5" />40-49km
      <input name="distanceInput" type="radio" value="d6" />50-59km
      <input name="distanceInput" type="radio" value="d7" />60-69km
      <input name="distanceInput" type="radio" value="d8" />70-79km
      <input name="distanceInput" type="radio" value="d9" />80-89km
    </form>
   <button onclick="getValues()">Get</button>

当我单击第一个无线电输入并调用getVales（）；我被警告的值"d1"，但当我单击任何其他我看到"no value"。

Answer 1

一个简单的方法是给单选按钮一个类并使用以下查询选择器。

实例

document.getElementById('btn').onclick = (e) => {
  const val = document.querySelector('.radio:checked').value;
  console.log(val);
};

<form>
  <input type="radio" name="test" class="radio" value="One" />
  <input type="radio" name="test" class="radio" value="Two" />
  <input type="radio" name="test" class="radio" value="Three" />
</form>
<button id="btn">Get Value</button>

Answer 2

是的，有这样一个功能。当您访问表单元素的集合上的名称时，对于单选按钮，您将返回一个具有值属性的特殊无线节点列表。

在您的情况下：

document.querySelector("form").elements["distanceInput"].value;

Answer 3

这比这简单得多。无需循环或if/then。只需使用。querySelector（）以隔离选中的单选按钮。

document.querySelector("button").addEventListener("click", function(){
  // Get the checked radio button
  let selected = document.querySelector("form input[name='distanceInput']:checked");

  console.log(selected.value);
});

<form>
  <input name="distanceInput" type="radio" value="d1" />0-9km
  <input name="distanceInput" type="radio" value="d2" />10-19km
  <input name="distanceInput" type="radio" value="d3" />20-29km
  <input name="distanceInput" type="radio" value="d4" />30-39km
  <input name="distanceInput" type="radio" value="d5" />40-49km
  <input name="distanceInput" type="radio" value="d6" />50-59km
  <input name="distanceInput" type="radio" value="d7" />60-69km
  <input name="distanceInput" type="radio" value="d8" />70-79km
  <input name="distanceInput" type="radio" value="d9" />80-89km

<button type="button">Get selected radio button value</button>
</form>