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

Advertisements

, , , , ,

  1. #1 by SutoCom on May 23, 2015 - 2:33 am

    Reblogged this on SutoCom Solutions.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: