Getting the selected radio without using “Id” but “name”

Question

I was trying to get selected radio button by using \"document.getElementByName(\'nameOfradio\')\" because all of the radio buttons share the same name. But, nothing happened

Answer 1

This is exactly why you should use a javascript library.

document.querySelector('input[name=nameOfradio]');

for example is not supported before IE8.

Let the library handle the browser craziness.

In jQuery you can just use $('input[name=radioName]:checked').val() or $("form").serialize() and be done with it.

Answer 2

Save yourself some pain in the later js dev and use a js library like jQuery. Then you can do something like $('input[name=radioName]:checked').val()

Answer 3

You can use the class property if your looking for a quick solution. Many elements can have the same class. use the command:

document.getElementsByClass('nameOfradio');

In addition you should use the correct form of getting elements by name which is:

document.getElementsByName('nameOfradio');

You can also use the following code to find the selected radio value as follows:

radioObj=document.getElementsById('nameOfradio');
var radioLength = radioObj.length;
if(radioLength == undefined) {
    if(radioObj.checked) {
        return radioObj.value;
    } else {
        return "";
    }
}
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";

Answer 4

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

Eg:-

<form>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  
</form> 

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

Also, you can add a checked attribute to a default radio button among the group of radio buttons if needed

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

Answer 5

This line:

document.getElementByName('nameOfradio').value

should be:

 document.querySelector('input[name=nameOfradio]:checked').value;

using querySelector

Note that CSS pseudo-classes are accessed by a colon (:).

Answer 6

Demo: http://jsfiddle.net/majidf/LhDXG/

Markup

Sex:<br/> 
<input type="radio" name="gender" value="male" /> Male<br/>
<input type="radio" name="gender" value="female" /> Female
<br/>
Age group:<br/> 
<input type="radio" name="ageGroup" value="0-3" /> 0 to 3<br/>
<input type="radio" name="ageGroup" value="3-5" /> 3 to 5<br/>
<input type="radio" name="ageGroup" value="5-10" /> 5 to 10<br/>

<button onclick="getValues();">Get values</button>

JS

function getRVBN(rName) {
    var radioButtons = document.getElementsByName(rName);
    for (var i = 0; i < radioButtons.length; i++) {
        if (radioButtons[i].checked) return radioButtons[i].value;
    }
    return '';
}

function getValues() {
    var g = getRVBN('gender');
    var a = getRVBN('ageGroup');
    alert(g + ' ' + a);
}