Subscribe
Please visit my new Web Site WWW.Codedisplay.com
In many forums i found that developers asking this question. I have answered in many forums and now i decide to write a post on how to get selected items or selected values of checkboxlist using Jquery. This is not an easy job. You need to loop through the checkbox list to get all selected items/values. Here if you look at my code example you will get the loop structer. Here i use comma separator to identify unique selected items. The output screen is given below:
Jquery Method:
<script type="text/javascript">
$(document).ready(function() {
$('#cmdGet').click(function()
{
var values='';
$('#<%=CheckBoxList1.ClientID %> input[type=checkbox]:checked').each(function()
{
if(values.length==0)
{
values = $('label[for=' + this.id + ']').html();
}
else
{
values += ","+$('label[for=' + this.id + ']').html();
}
});
alert(values);
return false;
});
});
</script>
Complete HTML Markup language to run the example:<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckboxList_Jquery.aspx.cs" Inherits="CheckboxList_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>ASP.NET Checkboxlist get values in client side using JQuery</title>
<script src="Script/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#cmdGet').click(function()
{
var values='';
$('#<%=CheckBoxList1.ClientID %> input[type=checkbox]:checked').each(function()
{
if(values.length==0)
{
values = $('label[for=' + this.id + ']').html();
}
else
{
values += ","+$('label[for=' + this.id + ']').html();
}
});
alert(values);
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
<asp:ListItem Text="Three" Value="3"></asp:ListItem>
<asp:ListItem Text="Four" Value="4"></asp:ListItem>
<asp:ListItem Text="Five" Value="5"></asp:ListItem>
</asp:CheckBoxList>
<hr />
<asp:Button runat="server" ID="cmdGet" Text="Get Selected Values" />
</div>
</form>
</body>
</html>
Now you got an idea of how to access the values in client-side. Hope it will help you to findout the selected items of checkbox list using jquery.Script tested for:
1. Internet Explorer (IE)
2. Mozilla Firefox
3. Opera
4. Google Chrome
7 comments:
thanks for that!
very good rich article. I tried and worked fine. thanks.
how to populate gridview on the checklistbox items selection?
how to filter the gridview with all the selected checklistbox items?
Its awesome.... Thanks for this..
good one
how to get values instead of text?
I WOULD BE DELIGHTED TO HEAR FROM YOU