Check/Uncheck all Items in an ASP.NET CheckBox List using jQuery
The CheckBoxList control in ASP.NET provides a group of checkboxes that can be dynamically generated by binding it to a data source. A few months ago, I had written a similar article using ASP.NET and JavaScript over here Check/Uncheck all items in a CheckBoxList using ASP.NET and Javascript . The approach we had taken using JavaScript was, we first retrieved the checkboxlist control using document.getElementById(cbControl) and then counted the number of <input> tags inside that control. Once we got the count, we used a loop to set the state of each control.
Open Visual Studio 2008 > File > New > Website > Choose ‘ASP.NET 3.5 website’ from the templates > Choose your language (C# or VB) > Enter the location > Ok. In the Solution Explorer, right click your project > New Folder > rename the folder as ‘Scripts’.
Right click the Scripts folder > Add Existing Item > Browse to the path where you downloaded the jQuery library (jquery-1.2.6.js) and the intellisense documentation (jquery-1.2.6-vsdoc.js) > Select the files and click Add.
Now drag and drop the jquery-1.2.6.js file from the Solution Explorer on to your page to create a reference as shown below
Drag and drop a CheckBoxList control to the page. Rename it to ‘cbList’.
<asp:CheckBoxList ID="cbList" runat="server">
</asp:CheckBoxList>
Now add items programmatically to the CheckBoxList by using the following code at the Page load event:
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
cbList.Items.Add(new ListItem("Items 1", "Items 1"));
cbList.Items.Add(new ListItem("Items 2", "Items 2"));
cbList.Items.Add(new ListItem("Items 3", "Items 3"));
cbList.Items.Add(new ListItem("Items 4", "Items 4"));
cbList.Items.Add(new ListItem("Items 5", "Items 5"));
}
}
VB.NET
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
If (Not Page.IsPostBack) Then
cbList.Items.Add(New ListItem("Items 1", "Items 1"))
cbList.Items.Add(New ListItem("Items 2", "Items 2"))
cbList.Items.Add(New ListItem("Items 3", "Items 3"))
cbList.Items.Add(New ListItem("Items 4", "Items 4"))
cbList.Items.Add(New ListItem("Items 5", "Items 5"))
End If
End Sub
Now drag and drop a CheckBox from the toolbox to the page and rename it as ‘chkAll’. Now if you observe the JavaScript solution in a previous article over here, I had to loop through the checkboxes and then set its ‘checked’ property. Let us see how we can achieve this in jQuery using 3 different jQuery approaches.
I have included all these approaches to show you how I reduced my code from Approach 1 to Approach 3
Approach 1: The longer approach
$("#chkAll").toggle(
function() {
$("input[@type='checkbox']").not('#chkAll').each(function() {
this.checked = true;
});
},
function() {
$("input[@type='checkbox']").not('#chkAll').each(function() {
this.checked = false;
});
});
});
Approach 2: Shortening the approach
<script type="text/javascript">
$(document).ready(function() {
$("#chkAll").toggle(
function() {
$('input[@type=checkbox]').attr('checked', 'true');
},
function() {
$('input[@type=checkbox]').removeAttr('checked');
});
});
</script>
Approach 3: Freezing it
<script type="text/javascript">
$(document).ready(function() {
$('#chkAll').click(
function() {
$("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
});
});
I liked the last approach which I got from here. In the code above, we are first assigning the click event to the CheckBox(chkAll).
<script type="text/javascript">
$(document).ready(function() {
$('#chkAll').click(
When the user clicks the checkbox, we run a function which finds all elements of the checkbox type and sets the ‘checked’ value of all items in the CheckBoxList to true or false based on the checked value of the ‘chkAll’ checkbox.
If you have multiple checkboxlist on your page, you can pass the CheckBoxList name and id as a parameter to the jQuery function as shown here:
$("INPUT[@name=" + name + "][type='checkbox']").attr('checked', $('#' + id).is(':checked'));
The entire code with the finalized approach (Approach 3) will look similar to the following:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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>Check/Uncheck All CheckBoxes Using JQuery</title>
<script src="Scripts/jquery-1.2.6.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#chkAll').click(
function() {
$("INPUT[type='checkbox']").attr('checked', $('#chkAll').is(':checked'));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="chkAll" runat="server" Text="Check All" /><br />
<asp:CheckBoxList ID="cbList" runat="server">
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
On running the application, you get a screen similar to the following:
On clicking the CheckAll checkbox, all the checkboxes gets selected, similar to a gmail application
On clicking the CheckAll checkbox again, the checkboxes gets unselected.
I hope you liked the article and I thank you for viewing it.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn