In this article I will explain with an example, how to implement ASP.Net RadioButtonList SelectedIndexChanged event in jQuery.
The SelectedIndexChanged event is a Server Side event of ASP.Net RadioButtonList and in jQuery which is Client Side library built over JavaScript programming language, jQuery Change event handler is being used.
HTML Markup
The HTML Markup consists of an ASP.Net RadioButtonList.
<asp:RadioButtonList ID="rblFruits" runat="server">
<asp:ListItem Text="Mango" Value="1"></asp:ListItem>
<asp:ListItem Text="Orange" Value="2"></asp:ListItem>
<asp:ListItem Text="Banana" Value="3"></asp:ListItem>
<asp:ListItem Text="Apple" Value="4"></asp:ListItem>
<asp:ListItem Text="Papaya" Value="5"></asp:ListItem>
</asp:RadioButtonList>
Understanding the RadioButtonList on Client Side
The RadioButtonList is rendered as an HTML Table in client side browser. Each item of RadioButtonList is a Table row consisting of a Table Cell with a RadioButton and a Label element.
The RadioButton holds the Value part while the Label element contains the Text part.
![Implement ASP.Net RadioButtonList SelectedIndexChanged event in jQuery]()
Get Selected Text and Value of ASP.Net RadioButtonList using jQuery
Inside the document ready event handler, the RadioButtons inside the RadioButtonLists are referenced and each RadioButton is assigned a jQuery Change event handler.
Inside the jQuery Change event handler, the RadioButton which is selected is referenced and then its corresponding Label element is referenced.
Finally the Text and Value of the selected RadioButton of the RadioButtonList is displayed using jQuery Alert message box.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var radios = $("[id*=rblFruits] input[type=radio]");
radios.change(function () {
var label = $(this).closest("td").find("label").eq(0);
alert("SelectedText: " + label.html()
+ "\nSelectedValue: " + $(this).val());
});
});
</script>
Screenshot
![Implement ASP.Net RadioButtonList SelectedIndexChanged event in jQuery]()
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
