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

Question

这可能看起来很愚蠢和彻头彻尾的愚蠢,但我似乎无法弄清楚如何通过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 检索值？

Answer 1

如果你想避免框架(我几乎总是想做),请使用document.querySelector().

document.querySelector('input[name="gender"]:checked').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.elementsor HTMLFieldSetElement.elements属性返回,所以你必须有一些表格或字段集的标识符,无线电输入被包装进去才能抓住它.

Answer 3

如果你使用像jQuery这样的javascript库,那很容易:

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

此代码将选择checked带有gender名称的输入,并获取它value.简单不是吗？

现场演示

Answer 4

要获得价值,您可以这样做:

document.getElementById("genderf").value;

但要检查,是否选中或选择了单选按钮:

document.getElementById("genderf").checked;

Answer 5

如果您将表单元素包装在带有 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>