Subscribe
Please visit my new Web Site https://coderstechzone.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:
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:
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.
Awesome !
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
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
helpful. thanks
Thanks man!, to find an option by value is what I was looking for.
Its very helpful..i searched many sites for the same but did get any help....this solved my problem
I WOULD BE DELIGHTED TO HEAR FROM YOU