Get RadioButtonList Selected Checked Text and Value using JavaScript in ASPNet

In this article I will explain with an example, how to get the RadioButtonList selected (checked) Text and Value using JavaScript in ASP.Net.

This article will illustrate how to find the selected (checked) RadioButton in an ASP.Net RadioButtonList using JavaScript and then determining its selected Text and Value.

HTML Markup

The following HTML Markup consists of an ASP.Net RadioButtonList.

<asp:RadioButtonList ID="RadioButtonList1" runat="server">

<asp:ListItem Text="One" Value="1"></asp:ListItem>

<asp:ListItem Text="Two" Value="2"></asp:ListItem>

<asp:ListItem Text="Three" Value="3"></asp:ListItem>

</asp:RadioButtonList>

Concept

The ASP.Net RadioButtonList control is rendered as an HTML Table with HTML RadioButtons as shown below.

Get RadioButtonList Selected (Checked) Text and Value using JavaScript in ASP.Net

Hence we will need to write a script which will loop through all the controls (RadioButtons) in the generated HTML table in order to get the selected Text and Value.

Next important point is that a RadioButtonList Item has two parts.

1. Text

2. Value

The Value part is available in the value attribute of the HTML RadioButton, while the Text part is available in the HTML Label element.

Get RadioButtonList Selected (Checked) Text and Value using JavaScript in ASP.Net

The following HTML Markup consists of an ASP.Net RadioButtonList and a Button.

The Button has been assigned an OnClientClick event handler, which makes a call to the GetSelectedItem Javascript function.

Inside the GetSelectedItem JavaScript function, first the reference of the RadioButtonList is determined and then all the RadioButtons and Label elements inside the RadioButtonList are referenced.

Then a loop is executed over the referenced RadioButtons and each RadioButton is validated whether it is checked or not.

If the RadioButton is checked, then the value of the RadioButton (i.e. the Selected Value) and the inner HTML of the Label element (i.e. the Selected Text) is displayed using JavaScript Alert Message Box.

function GetSelectedItem() {

var rb = document.getElementById("<%=RadioButtonList1.ClientID%>");

var radio = rb.getElementsByTagName("input");

var label = rb.getElementsByTagName("label");

for (var i = 0; i < radio.length; i++) {

if (radio[i].checked) {

alert("SelectedText: " + label[i].innerHTML

+ "\nSelectedValue: " + radio[i].value);

break;

}

return false;

}