单选按钮组在 Chrome 中有价值，但在 Firefox 中没有

Posted 2023-02-22

【中文标题】单选按钮组在 Chrome 中有价值，但在 Firefox 中没有

【英文标题】：Radio button group has value in Chrome but not in Firefox

【发布时间】：2014-06-23 19:14:07

【问题描述】：

我有一个类似的 html 表单

    <form name="radio-mc">
        <input type="radio" name="mc" id="radio-1" value="1"> First
        <input type="radio" name="mc" id="radio-2" value="2"> Second
        <input type="radio" name="mc" id="radio-3" value="3"> Third
    </form>

我可以使用以下 javascript 通过表单/输入名称在 Chrome 中获取所选值

document.forms['radio-mc']['mc'].value

但在 Firefox 中，该值是未定义的。

我通常认为这是 Chrome 的特色，但在 Firefox 检查器中，我可以看到父对象是具有 value 属性的 [object NodeList]。它根本没有设置任何东西......似乎永远。

在这种情况下我不能使用 jQuery。有什么方法可以在 Firefox 中的 vanilla javascript 中获得该值（无需像在 Chrome 中那样遍历单选按钮）？

【问题讨论】：

试试这个 var selected = $("input[type='radio'][name='mc']:checked");

是否需要支持IE8及更低版本？如果没有，那么document.forms['radio-mc'].querySelector('input:checked');

@cookiemonster 我没有。那效果很好。谢谢！

@cookiemonster 您应该将其发布为答案

@kennypu：谢谢，但 RobG 给出的答案比我想的要详细得多，所以我想我会 +1 他的。 :-)

【参考方案1】：

在引入Selectors API 之前，获取单选按钮组值的唯一方法是遍历成员：

function getRadioValue(group) 
  for (var i=0, iLen=group.length; i<iLen; i++) 
    if (group[i].checked) 
      return group[i].value;
    
  
  // No button selected - return '' or undefined?
  return '';


console.log(getRadioValue(document.forms['radio-mc']['mc'])); // value

然而，正如 cookie monster 所说，您可以将 querySelectorAll 用于支持它的浏览器：

var checked = document.forms['radio-mc'].querySelector('input:checked');
console.log(checked? checked.value : '');

如果表单中有多个单选按钮，或者还有复选框，则需要以下内容：

document.forms['radio-mc'].querySelector('[name=mc]:checked')    

否则你只会得到第一个选中的单选或复选框。

另外，由于您没有默认选择按钮，因此您需要处理没有选择按钮的情况。