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

Posted 2023-03-05

【中文标题】是否有一个 JavaScript 函数可以确定检查哪个无线电输入并使用该无线电输入的值发出警报？ [复制]

【英文标题】：Is there a JavaScript function that determines which radio input is checked and alerts with the value of that radio input? [duplicate]

【发布时间】：2019-06-25 07:51:06

【问题描述】：

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

我的最终目标是为客户构建报价单，但我在第一个障碍中遇到了挫折。使用“警报”是唯一看到任何结果的尝试（我尝试了 console.log、console.dir 等，我已经使用 chrome 控制台/调试器工作了几个小时，但无济于事。如果我有一台带有默认检查（checked="checked"）它也会失败，除非它是我选择的第一个无线电输入）。甚至下面的 JS 也是我在 *** 上发现的先前（非重复）问题的刮擦，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”的警报，但是当我单击任何其他值时，我看到“没有值”。

【问题讨论】：

return "no value"; .... 想一想：当未选择 first 项时，您会立即退出循环。 ...你看到你的错误了吗？

传奇@trincot。捂脸……

【参考方案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>

【参考方案2】：

一个简单的方法是给你的单选按钮一个类并使用以下查询选择器.<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>

【参考方案3】：

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

在你的情况下：

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

【参考方案4】：

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