How can I determine the SelectedValue of a RadioButtonList in JavaScript?

Question

I have an ASP.NET web page with a databound RadioButtonList. I do not know how many radio buttons will be rendered at design time. I need to determine the SelectedValue on

Answer 1

RadioButtonList is an ASP.NET server control. This renders HTML to the browser that includes the radio button you are trying to manipulate using JavaScript.

I'd recommend using something like the IE Developer Toolbar (if you prefer Internet Explorer) or Firebug (if you prefer FireFox) to inspect the HTML output and find the ID of the radio button you want to manipulate in JavaScript.

Then you can use document.getElementByID("radioButtonID").checked from JavaScript to find out whether the radio button is selected or not.

Answer 2

From here:

if (RadioButtonList1.SelectedIndex > -1) 
{
    Label1.Text = "You selected: " + RadioButtonList1.SelectedItem.Text;
}

Answer 3

I've tried various ways of determining a RadioButtonList's SelectedValue in Javascript with no joy. Then I looked at the web page's HTML and realised that ASP.NET renders a RadioButtonList control to a web page as a single-column HTML table!

<table id="rdolst" border="0">
  <tr>
    <td><input id="rdolst_0" type="radio" name="rdolst" value="Option 1" /><label for="rdolst_0">Option 1</label></td>
  </tr>
  <tr>
    <td><input id="rdolst_1" type="radio" name="rdolst" value="Option 2" /><label for="rdolst_1">Option 2</label></td>
  </tr>
</table>

To access an individual ListItem on the RadioButtonList through Javascript, you need to reference it within the cell's child controls (known as nodes in Javascript) on the relevant row. Each ListItem is rendered as the first (zero) element in the first (zero) cell on its row.

This example loops through the RadioButtonList to display the SelectedValue:

var pos, rdolst;

for (pos = 0; pos < rdolst.rows.length; pos++) {
    if (rdolst.rows[pos].cells[0].childNodes[0].checked) {
        alert(rdolst.rows[pos].cells[0].childNodes[0].value);
        //^ Returns value of selected RadioButton
    }
}

To select the last item in the RadioButtonList, you would do this:

rdolst.rows[rdolst.rows.length - 1].cells[0].childNodes[0].checked = true;

So interacting with a RadioButtonList in Javascript is very much like working with a regular table. Like I say I've tried most of the other solutions out there but this is the only one which works for me.

Answer 4

The HTML equivalent to ASP.NET RadioButtonList, is a set of <input type="radio"> with the same name attribute(based on ID property of the RadioButtonList).

You can access this group of radio buttons using getElementsByName. This is a collection of radio buttons, accessed through their index.

alert( document.getElementsByName('RadioButtonList1') [0].checked );

Answer 5

I would like to add the most straightforward solution to this problem:

var reasons= document.getElementsByName("<%=RadioButtonList1.UniqueID%>");
var answer;
for (var j = 0; j < reasons.length; j++) {
    if (reason[j].checked) {
        answer = reason[j].value;
    }
}

UniqueID is the property that gave you the name of the inputs inside the control, so you can just check them really easily.

Answer 6

reasonCode.options[reasonCode.selectedIndex].value