How to get the checked option in a group of radio inputs with JavaScript?

Question

What do you want to use the option for ?-) Torbjørns answer returns the value, which in most situations would be sufficient, but sometimes it could be possible to do other things ... — roenving, Oct 02 '08 at 13:55

leoinfo · Accepted Answer · 2008-10-02T15:00:14.197

10

<html>
  <head>
    <script type="text/javascript">
      function testR(){
        var x = document.getElementsByName('r')
        for(var k=0;k<x.length;k++)
          if(x[k].checked){
            alert('Option selected: ' + x[k].value)
          }

      }
    </script>
  </head>
  <body>
    <form>
      <input type="radio" id="r1" name="r" value="1">Yes</input>
      <input type="radio" id="r2" name="r" value="2">No</input>
      <input type="radio" id="r3" name="r" value="3">Don't Know</input>
      <br/>
      <input type="button" name="check" value="Test" onclick="testR()"/>
    </form>
  </body>
</html>

edited Oct 02 '08 at 15:00

answered Oct 02 '08 at 13:58

leoinfo

7,860
8
36
48

But using document.all to get elements is a bad practice as it only works in a few browsers, use the standard document.getElementsByName instead !-) – roenving Oct 02 '08 at 14:47
You're right... but I think Daniel got the idea. Anyway, I changed "document.all" to "document.getElementsByName" – leoinfo Oct 02 '08 at 15:03

score 2 · Answer 2 · answered Oct 02 '08 at 13:44

2

http://www.somacon.com/p143.php

answered Oct 02 '08 at 13:44

Torbjørn

6,423
5
29
42

score 2 · Answer 3 · answered Oct 02 '08 at 14:01

If you need the actual element and not just the selected value, try this:

function findSelected(){
  for (i=0;i<document.formname.radioname.length;i++){
    if (document.formname.radioname[i].checked){
      return document.formname.radioname[i];
    }
  }
}

score 0 · Answer 4 · edited Jun 03 '14 at 12:19

generic functions (loosely based on yours )

function getRadioGroupSelectedElement(radioGroupName) {

    var radioGroup = document.getElementsByName(radioGroupName);
    var radioElement = radioGroup.length - 1;
    for(radioElement; radioElement >= 0; radioElement--) {
        if(radioGroup[radioElement].checked){
            return radioGroup[radioElement];
        }
    }
    return false;
}



function getRadioGroupSelectedValue(radioGroupName) {

    var selectedRadio = getRadioGroupSelectedElement(radioGroupName);
    if (selectedRadio !== false) {
        return selectedRadio.value;
    }
    return false;
}

How to get the checked option in a group of radio inputs with JavaScript?

4 Answers4

Linked

Related