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

Question

我有一个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检查器中,我可以看到父对象是一个[object NodeList]具有value属性的对象.它根本就没有任何东西......看似永远.

在这种情况下我不能使用jQuery.有没有办法在Firefox中的vanilla javascript中获取一个值(没有像我在Chrome中那样迭代单选按钮)？

Answer 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怪物评论的那样,您可以将querySelectorAll用于支持它的浏览器:

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

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

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

否则你只需要获得第一个选中的收音机或复选框.

此外,由于您没有默认的选定按钮,因此您需要处理未选择任何按钮的情况.