How to get the selected item value from RadiobuttonList using JQuery

Introduction:

In this article I am going to explain how to get the selected value from RadioButtonList control using JQuery in Asp.Net.

Prerequisites:

You need to add the necessary JQuery files to your page prior to use this plugin. In this example I have used the online JQuery CDN files available. If you don’t want to use the online available cdn file then you can manually add the jquery files to your solution. I have explained the steps here in detail.

Implementation:

Here we will make use of Jquery selectors to get the selected item value and text from RadioButtonList and then get the value.

To get the selected value

//Get the selected item value from RadioButtonList
var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked").val();

To get the selected item text value

//Get the selected item text value from RadioButtonList
var rblSelectedText = $("#<%= RadioButtonList1.ClientID %> input:checked").next().html();

Complete Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //Attach click event to button
            $('#Button1').click(function (e) {
                //Get the selected item value from RadioButtonList
                var rblSelectedValue = $("#<%= RadioButtonList1.ClientID %> input:checked").val();

                $("#<%= lblSelectedValue.ClientID %>").text(rblSelectedValue);

                //Get the selected item text value from RadioButtonList
                var rblSelectedText = $("#<%= RadioButtonList1.ClientID %> input:checked").next().html();

                $("#<%= lblSelectedItem.ClientID %>").text(rblSelectedText);

                //Cancel the postback
                e.preventDefault();
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:RadioButtonList ID="RadioButtonList1" runat="server">
            <asp:ListItem Value="1" Text="First"></asp:ListItem>
            <asp:ListItem Value="2" Text="Second"></asp:ListItem>
            <asp:ListItem Value="3" Text="Third"></asp:ListItem>
            <asp:ListItem Value="4" Text="Fourth"></asp:ListItem>
            <asp:ListItem Value="5" Text="Fifth"></asp:ListItem>
        </asp:RadioButtonList>
        <asp:Button ID="Button1" runat="server" Text="GetSelectedValue" />


        Selected Value
        <asp:Label ID="lblSelectedValue" runat="server" Text=""></asp:Label>

        Selected Item
        <asp:Label ID="lblSelectedItem" runat="server" Text=""></asp:Label>
    </form>
</body>
</html>

Demo

Asp.Net, Jquery, RadioButtonList, Selected, Text, Value

This entry was posted on May 15, 2015, 3:16 am and is filed under Asp.Net, JavaScript, JQuery. You can follow any responses to this entry through RSS 2.0. You can skip to the end and leave a response. Pinging is currently not allowed.

AspdotnetCodehelp