通过JavaScript检查单选按钮组的值？

这看起来很愚蠢和愚蠢，但是我似乎无法弄清楚如何通过JavaScript检查HTML表单中单选按钮组的值。我有以下代码：

<input type="radio" id="genderm" name="gender" value="male" />
<label for="genderm">Male</label>
<input type="radio" id="genderf" name="gender" value="female" />
<label for="genderf">Female</label>

如何gender通过JavaScript检索值？

如果您使用的是jQuery之类的JavaScript库，则非常简单：

alert($('input[name=gender]:checked').val());

此代码将选择checked具有gender名称的输入，并得到它value。是不是很简单？

现场演示

如果要避免使用框架（我几乎总是想这样做），请使用document.querySelector（）。

document.querySelector('input[name="gender"]:checked').value

用纯Javascript：

var genders = document.getElementsByName("gender");
var selectedGender;

for(var i = 0; i < genders.length; i++) {
   if(genders[i].checked)
       selectedGender = genders[i].value;
 }

更新

在无循环的纯Javascript中，使用较新的（可能尚不支持）RadioNodeList：

var form_elements = document.getElementById('my_form').elements;
var selectedGender = form_elements['gender'].value;

唯一的问题RadioNodeList是只能由HTMLFormElement.elements或HTMLFieldSetElement.elements属性返回，因此您必须具有用于包装无线电输入的表单或字段集的某些标识符才能首先捕获它。

要获得价值，您可以这样做：

document.getElementById("genderf").value;

但是要检查是否选中或选中了单选按钮：

document.getElementById("genderf").checked;

尝试：

var selectedVal;

for( i = 0; i < document.form_name.gender.length; i++ )
{
  if(document.form_name.gender[i].checked)
    selectedVal = document.form_name.gender[i].value; //male or female
    break;
  }
}

如果将表单元素包装在具有名称属性的表单标记中，则可以使用document.formName.radioGroupName.value轻松获取值。

<form name="myForm">
    <input type="radio" id="genderm" name="gender" value="male" />
    <label for="genderm">Male</label>
    <input type="radio" id="genderf" name="gender" value="female" />
    <label for="genderf">Female</label>
</form>

<script>
    var selected = document.forms.myForm.gender.value;
</script>

无循环：

document.getElementsByName('gender').reduce(function(value, checkable) {
    if(checkable.checked == true) 
        value = checkable.value; 
    return value;
}, '');

reduce 只是一个函数，它将按顺序将数组元素提供给回调的第二个参数，并将先前返回的函数提供给value，而对于第一次运行，它将使用第二个参数的值。

这种方法的唯一缺点是，getElementsByName即使在找到选定的单选按钮后，reduce也将遍历返回的每个元素。