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

Question

理论上，我可以使用 for 循环遍历各种无线电输入以查看选中了哪些无线电输入，然后提醒选中的无线电输入的值，但该功能仅在选择第一个无线电输入时有效。

我最后的 objective 是为客户构建报价表，但我在第一个障碍上跌跌撞撞。 'alert' 的使用是唯一看到任何结果的尝试（我尝试了 console.log、console.dir 等，我已经使用 chrome [=29= 工作了几个小时] 无济于事。如果我有一个带默认检查的收音机 (checked="checked") 它也会失败，除非它是我选择的第一个收音机输入）。甚至下面的 JS 也是我在 Whosebug 上发现的一个（不是重复的）问题的刮痕，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>

当我点击第一个单选输入并调用 getValues() 时；我收到值 "d1" 的提醒，但当我单击任何其他值时，我看到 "no value"。

Answer 1

您的函数 returns 在第一次检查后，请改用此格式：

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

    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>

或者没有循环：

const radioButtonValue = radioName => {
      var radioButton = document.querySelector("input[name="+radioName+"]:checked");
      return radioButton?radioButton.value:"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>

Answer 2

这个比这个简单多了。不需要循环或 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>

Answer 3

是的，有这样的功能。当您访问 elements collection of the form element, for radiobuttons you get back a special RadioNodeList that has a value property.

上的名称时

你的情况：

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

Answer 4

一个简单的方法是给你的单选按钮一个 class 并使用下面的查询选择器 .<className>:checked

例子

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>

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

Is there a JavaScript function that determines which radio input is checked and alerts with the value of that radio input?

javascript

html

radio-group

checked