JQuery Click Event to Get Set RadioButtonList Selected Value Asp.Net C# VB.Net

In one of my previous post i have written an article on “How to get set RadioButtonList value using javascript“. Since Jquery now a popular scripting language that’s why in this post I am going to explain how one can access or get or read or set RadioButtonList Selected Value using Jquery. Using javascript we can directly use RadioButonList click handler, but in Jquery we can’t. So what is the solution? Yes every problem has solution. Here i am using a trick to handle RadioButtonList click handler. First add a DIV tag. And then within the DIV tag place your RadioButtonList. After that when user click on the div tag we will fire a div click event & will handle RadioButtonList select value through Jquery command.


First add the Jquery Reference:

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>

Now design the HTML like below:

    <div id="RadioDiv">
           <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
                <asp:ListItem Value="One">1</asp:ListItem>
                <asp:ListItem Value="Two">2</asp:ListItem>
                <asp:ListItem Value="Three">3</asp:ListItem>
                <asp:ListItem Value="Four">4</asp:ListItem>
                <asp:ListItem Value="Five">5</asp:ListItem>
            <hr />
        <input id="cmdSetValue" type="button" value="Set Four" />
        <hr />
        <div id="info" style="font-weight:bold"></div> 

Now write the Jquery Function to Get Set RadioButtonList SelectedValue:

<script language="javascript">
    $(document).ready(function () {
        $('#RadioDiv input').click(function () {
            $("#info").text('Selected Value: ' + $("#RadioDiv input:radio:checked").val());

        $("#cmdSetValue").click(function () {
            $('#<%=RadioButtonList1.ClientID %>').find("input[value='Four']").attr("checked", "checked");
            $('#RadioDiv input:radio:checked').trigger('click');


Note: Look at Jquery Selectors carefully.

Now run the project. Hope you can get the SelectedValue of RadioButtonList as well as can set the SelectedValue of RadioButtonList.

Download Code Example C#        Download Code Example VB.Net

Posted in .Net, Asp.net, C#, Client, JQuery, VB.Net

Leave a Reply

Your email address will not be published. Required fields are marked *