Checking the value of a group of radio buttons via JavaScript?

Question

This may seem silly and completely silly, but I can't figure out how to check the value of a radio button group in my HTML form using JavaScript. I have the following code:

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

How to get gender value via javascript?

Answer 1

If you are using a javascript library like jQuery, this is very simple:

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

This code will select the checked input named gender and get its value . Simple right?

Live demo

Answer 2

In pure Javascript:

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

Update

In pure Javascript without a loop, using the new (and possibly not yet supported) RadioNodeList :

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

The only catch is that the RadioNodeList returned only using the HTMLFormElement.elements or HTMLFieldSetElement.elements , so you need to have some form identifier or set of fields into which the radio inputs are inserted in order to capture it first.

Answer 3

Use document.querySelector () if you want to avoid frameworks (which I almost always want to do).

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

Answer 4

To get the value, you do the following:

 document.getElementById("genderf").value; 

But to check whether the switch is checked or selected:

 document.getElementById("genderf").checked; 

Answer 5

Try:

 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

If you wrap form elements in a form tag with a name attribute, you can easily get the value using 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

Without a loop:

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

reduce is just a function that will feed the elements of the array sequentially to the second callback argument and the previously returned function for the value, and for the first run it will use the value of the second argument.

The only downside to this approach is that reduce will traverse every element returned by getElementsByName , even after it has found the selected switch.