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 the client via JavaScript. I've tried the following without much luck:

var reasonCode = document.getElementById("RadioButtonList1");
var answer = reasonCode.SelectedValue;

("answer" is being returned as "undefined") Please forgive my JavaScript ignorance, but what am I doing wrong?

Thanks in advance.

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

reasonCode.options[reasonCode.selectedIndex].value

Answer 3

I always View Source. You will find each radio button item to have a unique id you can work with and iterate through them to figure out which one is Checked.

Edit: found an example. I have a radio button list rbSearch. This is in an ascx called ReportFilter. In View Source I see

ReportFilter1_rbSearch_0
ReportFilter1_rbSearch_1
ReportFilter1_rbSearch_2

So you can either loop through document.getElementById("ReportFilter1_rbSearch_" + idx ) or have a switch statement, and see which one has .checked = true.

Answer 4

From here:

if (RadioButtonList1.SelectedIndex > -1)

{

Label1.Text = "You selected: " + RadioButtonList1.SelectedItem.Text;

}

Answer 5

ASP.NET renders a table and a bunch of other mark-up around the actual radio inputs. The following should work:-

 var list = document.getElementById("radios"); //Client ID of the radiolist
 var inputs = list.getElementsByTagName("input");
 var selected;
 for (var i = 0; i < inputs.length; i++) {
      if (inputs[i].checked) {
          selected = inputs[i];
          break;
       }
  }
  if (selected) {
       alert(selected.value);
  }

Answer 6

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 7

For radibuttonlist with only 2 values yes and no i have done the below

var chkval=document.getElemenById("rdnPosition_0")

here rdnposition_0 refers to the id of the yes listitem(i got it by viewing the source code of the form)

Then i did chkval.checked to know if the values yes is checked.