How can we access the value of a radio button using the DOM?

Question

How can we access the value of a radio button using the DOM?

For eg. we have the radio button as :

Answer 1

You can get your selected radio's value by this method :

<script>
function getRadioValue()
{
    for (var i = 0; i < document.getElementsByName('sex').length; i++)
    {
        if (document.getElementsByName('sex')[i].checked)
        {
            return document.getElementsByName('sex')[i].value;
        }
    }
}
</script>

Answer 2

document.getElementByName("sex").value

You mean getElementsByName('sex')[0].value? (There's no getElementByName.)

That will of course always pick the first input element with that name — the one whose value is indeed male. You then check to see if it's selected by using the ‘.checked’ property.

For this simple case you can get away with:

var sex= document.getElementsByName("sex")[0].checked? 'male' : 'female';

For the general case you have to loop over each radio input to see which is checked. It would probably be better to get the form object first (putting an id on the form and using document.getElementById is generally better than using the ‘name’-based document.forms collection), and then access form.elements.sex to get the list, in case there are any other elements on the page that have name="sex" attributes (potentially other things than form fields).

Answer 3

Just to "generify" Canavar's very helpful function:

function getRadioValue(theRadioGroup)
{
    var elements = document.getElementsByName(theRadioGroup);
    for (var i = 0, l = elements.length; i < l; i++)
    {
        if (elements[i].checked)
        {
            return elements[i].value;
        }
    }
}

... which would now be referenced thusly:

getRadioValue('sex');

Strange that something like this isn't already a part of prototype.js.

Answer 4

var list = document.getElementsByName('sex');
for(var i=0;i<list.length;i++){
   if(list[i].type=='radio' && list[i].checked){
      alert(list[i].value);
      break;
   }
}

Answer 5

Loops can achieve the task, as others have shown but it could be simpler than using a loop, which will help performance if desired. Also, it can be portable/modular so it can be used for different radio groups.

Simple Example

function getValue(x) {
  alert(x.value);
}

<input name="sex" type="radio" value="male" onChange="getValue(this)" />
<input name="sex" type="radio" value="female" onChange="getValue(this)" />

A more complex example:

function getValue(x){
  alert(x.value);
}

<fieldset>
  <legend>Sex</legend>
  <label>Male:
    <input name="sex" type="radio" value="male" onChange="getValue(this)"/>
  </label>
  <label>Female:
    <input name="sex" type="radio" value="female" onChange="getValue(this)" />
  </label>
</fieldset>
<fieldset>
  <legend>Age Group</legend>
  <label>0-13:
    <input name="ageGroup" type="radio" value="0-13" onChange="getValue(this)" />
  </label>
  <label>13-18:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>18-30:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
  <label>30+:
    <input name="ageGroup" type="radio" value="13-18" onChange="getValue(this)" />
  </label>
</fieldset>

Answer 6

• document.all.sex[0].checked
• document.all.set[1].checked