In this article I will explain how to get selected Text and Value of RadioButtonList using jQuery and also set selected item in RadioButtonList by Value and by Text using jQuery in ASP.Net.
HTML Markup
The HTML Markup consists of an ASP.Net RadioButtonList and three Buttons.
<asp:RadioButtonList ID="rblFruits" runat="server">
<asp:ListItem Text="Mango" Value="1" />
<asp:ListItem Text="Apple" Value="2" />
<asp:ListItem Text="Banana" Value="3" Selected = "True" />
<asp:ListItem Text="Guava" Value="4" />
</asp:RadioButtonList>
<asp:Button ID="btnGet" Text="Get Selected Value" runat="server" />
<asp:Button ID="btnSet_Text" Text="Set Selected Text" runat="server" />
<asp:Button ID="btnSet_Value" Text="Set Selected Value" runat="server" />
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.
![Get and Set Selected Text and Value of RadioButtonList using jQuery in ASP.Net]()
Get Selected Text and Value of ASP.Net RadioButtonList using jQuery
When the btnGet Button is clicked, the following jQuery event handler is executed. First the reference of the RadioButton which is checked in the RadioButtonList is determined.
Using this reference, the Value part is fetched and stored in a variable. For the Text part, the associated Label element is selected and its contents are stored in a variable.
Finally the Text and Value parts of the selected RadioButtonList Item is displayed using JavaScript alert message box.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnGet]").click(function () {
var checked_radio = $("[id*=rblFruits] input:checked");
var value = checked_radio.val();
var text = checked_radio.closest("td").find("label").html();
alert("Text: " + text + " Value: " + value);
return false;
});
});
</script>
Set Selected Item of ASP.Net RadioButtonList based on Text using jQuery
When the btnSet_Text Button is clicked, the following jQuery event handler is executed. The reference of the RadioButton in the RadioButtonList is determined by selecting the Label element based on Text using the jQuery Contains selector.
Once the reference is found, the RadioButton is checked.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnSet_Text]").click(function () {
var text = "Mango";
var radio = $("[id*=rblFruits] label:contains('" + text + "')").closest("td").find("input");
radio.attr("checked", "checked");
return false;
});
});
</script>
Set Selected Item of ASP.Net RadioButtonList based on Value using jQuery
When the btnSet_Value Button is clicked, the following jQuery event handler is executed. The reference of the RadioButton in the RadioButtonList is determined by selecting the RadioButton based on its value.
Once the reference is found, the RadioButton is checked.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnSet_Value]").click(function () {
var value = "2";
var radio = $("[id*=rblFruits] input[value=" + value + "]");
radio.attr("checked", "checked");
return false;
});
});
</script>
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
