Question

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

我的最终目标是为客户建立报价表，但我遇到了第一个障碍。使用“ alert”是唯一看到任何结果的尝试（我尝试过console.log，console.dir等。我在chrome console / debugger上工作了几个小时都无济于事。默认检查（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>

当我单击第一个单选输入并调用getValues（）时；我收到值“ d1”的警报，但是单击其他任何值时，都会看到“无值”。

Answer 1

您的函数在第一次检查后返回，请改用以下格式：

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

是的，有这样的功能。当您访问form元素的elements collection上的名称时，对于单选按钮，您将返回一个特殊的RadioNodeList，它具有一个value property。

在您的情况下：

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

Answer 4

一种简单的方法是给单选按钮一个类，然后使用以下查询选择器.<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函数来确定检查哪个单选输入并以该单选输入的值进行提醒？

4 个答案: