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
 
 

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.
<script type="text/javascript">
    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;
    }
</script>
<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>
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Get Selected" OnClientClick="return GetSelectedItem()" />
 
 
Screenshot
Get RadioButtonList Selected (Checked) Text and Value using JavaScript in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads