Tuesday, October 5, 2010

How to Set Get RadioButtonList Selected Value using Jquery




Please visit my new Web Site WWW.Codedisplay.com



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 thats why in this post i am going to explain how one can access or get or read or set RadioButtonList 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. My example output is given below:

RadioButtonList Jquery

For example the HTML Markup Code is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Radiobuttonlist_jquery.aspx.cs" Inherits="Radiobuttonlist_jquery" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
    <title>Jquery to get set RadioButtonList Value</title>
    <script src="Script/jquery.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
        <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>
            </asp:RadioButtonList>
            <hr />
        </div>
        <input id="cmdSetValue" type="button" value="Set Four" />
        <hr />
        <div id="info" style="font-weight:bold"></div>    
    </form>
</body>
</html>

Now add the below Jquery script:
<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');
            });

        });  
    </script> 

Now run the page & hope you will understand the technique that i have applied to capture RadioButtonList click event as well as setting a SelectedValue to the RadioButtonList.

Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome

7 comments:

Unknown said...

Thanks for this. It's EXACTLY what I needed.
I was trying to do it in javascript and was having cross-browser issues. This solved it all very nicely.
I appreciate the effort and time that you put in to post this article.

Anonymous said...

Awesome !

Unknown said...

Hi..

What happens if my div has the runat="server". What am doing is that after i hide the div programmatically in the code behind page, I cannot access what has been selected in the RadoButtonList, using JQuery

Unknown said...

Hi..

What happens if my div has the runat="server". What am doing is that after i hide the div programmatically in the code behind page, I cannot access what has been selected in the RadoButtonList, using JQuery

Ashrafur Rahaman said...

helpful. thanks

Anonymous said...

Thanks man!, to find an option by value is what I was looking for.

Anonymous said...

Its very helpful..i searched many sites for the same but did get any help....this solved my problem

Want to say something?
I WOULD BE DELIGHTED TO HEAR FROM YOU

Want To Search More?
Google Search on Internet
Subscribe RSS Subscribe RSS
Article Categories
  • Asp.net
  • Gridview
  • Javascript
  • AJAX
  • Sql server
  • XML
  • CSS
  • Free Web Site Templates
  • Free Desktop Wallpapers
  • TopOfBlogs
     
    Free ASP.NET articles,C#.NET,VB.NET tutorials and Examples,Ajax,SQL Server,Javascript,Jquery,XML,GridView Articles and code examples -- by Shawpnendu Bikash