Get Selected Text and Value of ASP.Net RadioButtonList using jQuery
 
Author:
Filed Under: RadioButtonList
Published Date: Mar 06, 2012
Views: 1631
 

Abstract: Here Mudassar Ahmed Khan has explained how to get Selected Item, its SelectedText and SelectedValue in ASP.Net RadioButtonList control using jQuery.

 


Get Selected Text and Value of ASP.Net RadioButtonList using jQuery
The below code snippet explains how to get the Selected Text and Selected Value part of ASP.Net RadioButtonList control using jQuery.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        $("#demo").live("click", function () {
            var checkedRadio = $("#rbFruits input[type=radio]:checked");
            if (checkedRadio.length > 0) {
                var selectedValue = checkedRadio.val();
                var selectedText = checkedRadio.next().html();
                alert("Selected Text: " + selectedText + " Selected Value: " + selectedValue);
            } else {
                alert("Item not selected.");
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:RadioButtonList ID="rbFruits" runat="server">
        <asp:ListItem Text="Mango" Value="1" />
        <asp:ListItem Text="Apple" Value="2" />
        <asp:ListItem Text="Banana" Value="3" />
    </asp:RadioButtonList>
    <input type = "button" id = "demo" value = "Demo" />
    </form>
</body>
</html>
 
 
Explanation:
In the above code snippet I have an ASP.Net RadioButtonList control rbFruits and an HTML button demo to which I have assigned jQuery click event handler. When the HTML button is clicked, first we determine the checked Radio Button from the list of Radio Buttons in the ASP.Net RadioButtonList control using the selector #rbFruits input[type=radio]:checked. Once that is determined we find the SelectedText (which is available in the HTML label control next to the RadioButton in the ASP.Net RadioButtonList) and SelectedValue (which is the value of the checked Radio Button).
 
Demo: