通过JavaScript检查单选button组的值？

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

<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> 

如何通过JavaScript检索gender的值？

Answer 1

如果你正在使用像jQuery这样的JavaScript库，那么很简单：

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

此代码将selectgender名称的checkedinput，并获取它的value 。 简单不是吗？

现场演示

Answer 2

在纯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属性返回的，所以你必须有一些表单或HTMLFieldSetElement.elements ，以便无线电input被包装在其中以便首先抓取它。

Answer 3

使用document.querySelector（）如果你想避免框架（我几乎总是想要做的）。

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

Answer 4

要获得价值，你会这样做：

 document.getElementById("genderf").value; 

但要检查是否选中或单选button：

 document.getElementById("genderf").checked; 

Answer 5

尝试：

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; } }
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; } } 

Answer 6

如果将表单元素封装在带有name属性的表单标签中，则可以使用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> 

Answer 7

没有循环：

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

reduce只是一个函数，将数组元素依次传递给第二个callback参数，并且之前将函数返回值，而第一次运行时，它将使用第二个参数的值。

这种方法的唯一缺点是reduce会遍历getElementsByName返回的每个元素，即使find了所选的单选button。