In this article I will explain with an example, how to get and set checked RadioButton
Text and
Value using
jQuery and also made RadioButton selected based on
Text and
Value using
jQuery in ASP.Net.
HTML Markup
The following HTML Markup consists of:
RadioButtonList – For displaying RadioButtons.
RadioButtonList consists of four ListItems in which Selected property of one Item is set to TRUE.
Buttons – Three Buttons will be used for performing different functions.
For selecting Text and Value of checked RadioButton.
For making RadioButton checked based on Text.
For making RadioButton checked based on Value.
<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" runat="server" Text="Get Selected Item" />
<br />
<br />
<asp:Button ID="btnSet_Text" runat="server" Text="Set Selected Text" />
<br />
<br />
<asp:Button ID="btnSet_Value" runat="server" Text="Set Selected Value" />
Understanding the RadioButtonList on Client Side
The RadioButtonList is rendered as an HTML Table on 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, while the Label element contains the Text.
![Get and Set Selected Text and Value of RadioButtonList using jQuery in ASP.Net]()
Get Selected Text and Value of checked RadioButton using jQuery
Inside the
document ready event handler, the
Get Selected Item button has been assigned with a
jQuery click event handler.
Inside this click event handler, first the reference of the checked RadioButton in the RadioButtonList is determined.
The Value of referenced RadioButton is fetched and Text of associated Label element is also fetched.
Finally, the
Text and
Value of all the selected RadioButton Item is displayed using
JavaScript Alert Message Box.
Set RadioButton checked based on Text using jQuery
Inside the
document ready event handler, the
Set Selected Text button has been assigned with a
jQuery click event handler.
Inside this
click event handler, the reference of the RadioButton in the RadioButtonList is determined by selecting the Label element based on predefined
Text using the
jQuery contains selector.
Once the reference is found, the RadioButton with predefined Text is made checked.
Finally, the
Text and
Value of checked RadioButton is displayed using
JavaScript Alert Message Box and FALSE is returned.
Set RadioButton checked based on Value using jQuery
Inside the
document ready event handler, the
Set Selected Value button has been assigned with a
jQuery click event handler.
Inside this click event handler, the reference of the RadioButton in the RadioButtonList is determined by selecting RadioButton based on predefined Value.
Once the reference is found, the RadioButton with predefined Value is made checked.
<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;
});
});
$(function () {
$("[id*=btnSet_Text]").click(function () {
var text = "Mango";
var radio = $("[id*=rblFruits] label:contains('" + text + "')").closest("td").find("input");
radio.attr("checked", "checked");
});
});
$(function () {
$("[id*=btnSet_Value]").click(function () {
var value = "2";
var radio = $("[id*=rblFruits] input[value=" + value + "]");
radio.attr("checked", "checked");
});
});
</script>
Screenshot
![Get and Set Selected Text and Value of RadioButtonList using jQuery in ASP.Net]()
Browser Compatibility
* All browser logos displayed above are property of their respective owners.
Demo
Downloads
