Articles → JQUERY → Check And Uncheck All Checkboxes Using Jquery And Asp.Net

Check And Uncheck All Checkboxes Using Jquery And Asp.Net

In this article I will explain how to check and uncheck all checkboxes in a gridview using jQuery and asp.net.

Software Requirement

Before you start reading this tutorial you should make sure that

Visual studio 2005 (or above) is installed on your machine.
Latest jQuery file i.e. jquery-latest.js (from the path http://code.jquery.com/jquery-latest.js) is downloaded on your system.

Prerequisite Knowledge

Before you go ahead, it is required that you should know

How to create a website (web project) in asp.net?
What are asp.net server controls (specially checkbox and gridview)?
How to bind data in gridview?
What are template fields in gridview?
What is the purpose of ready method in JQuery?
How to add events to HTML elements in jQuery?

Creation Of A Project

First of all create a new asp.net web application. Once you have created the project, add following files in the project

Check_All_Demo.aspx
Content.xml

See the screen shot below for project structure

Picture showing the project structure in the solution explorer of the visual studio

Click to Enlarge

Adding Content In Xml File

Add following xml tags in xml file

<root>
    <book content="Content1"></book>
    <book content="Content2"></book>
</root>

We will bind this content with the gridview.

Add Gridview In Aspx Page

Add following code in aspx page

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkDelete" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Content">
            <ItemTemplate>
                <asp:Label ID="lblContent" runat="server" Text='<% #Eval("Content") %>'>
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Adding ‘Delete All’ Checkbox On The Page

Once gridview is added, we will add ‘Delete All’ checkbox on the web page. The purpose of this checkbox is to check (or uncheck) all the checkboxes in the gridview. See the updated code below

<asp:CheckBox runat="server" ID="chkDeleteAll" Text="Delete All" />
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:CheckBox ID="chkDelete" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Content">
            <ItemTemplate>
                <asp:Label ID="lblContent" runat="server" Text='<% #Eval("Content") %>'>
                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Bind Grid From Xml

For binding xml data with gridview add following code on page load event in code behind

protected void Page_Load(object sender, EventArgs e) {
	if (!IsPostBack) {
		DataSet ds = new DataSet();
		ds.ReadXml(Server.MapPath("~/Content.xml"));
		GridView1.DataSource = ds.Tables[0];
		GridView1.DataBind();
	}
}

Adding Jquery Code

Add following jQuery code in the header section of page

<script type="text/javascript">
         $(document).ready(function() {
	$("#<%=chkDeleteAll.ClientID %>").click(function() {
		$("#<%=GridView1.ClientID %> tr td").find("input:checkbox").each(function() {
			if($(this).attr("checked") == undefined) {
				$(this).attr("checked", 'checked');
			} else if($(this).attr("checked") == 'checked') {
				$(this).removeAttr("checked");
			}
		});
	});
});            
</script>

If ‘Delete All’ checkbox is not checked then it means that the attribute ‘checked’ is not present in ‘Delete All’ checkbox (You can see the rendered HTML code). So when we click the checkbox for the first time the attribute ‘checked’ is undefined. So the condition would be if the ‘checked’ property is undefined then check all the checkboxes in gridview.

But once the checkbox is checked, the attribute ‘checked’ gets added in ‘Delete All’ checkbox. At the time of uncheck we will check if ‘checked’ attribute is present then uncheck all the checkboxes in gridview.

Output

Click to Enlarge

Complete Code

Aspx code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Check_All_Demo.aspx.cs" Inherits="Check_All_Demo" %>
<!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></title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		$("#<%=chkDeleteAll.ClientID %>").click(function() {
			$("#<%=GridView1.ClientID %> tr td").find("input:checkbox").each(function() {
				if($(this).attr("checked") == undefined) {
					$(this).attr("checked", 'checked');
				} else if($(this).attr("checked") == 'checked') {
					$(this).removeAttr("checked");
				}
			});
		});
	});
	</script>
</head>

<body>
	<form id="form1" runat="server">
		<div>
			<asp:CheckBox runat="server" ID="chkDeleteAll" Text="Delete All" />
			<br />
			<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
				<Columns>
					<asp:TemplateField>
						<ItemTemplate>
							<asp:CheckBox ID="chkDelete" runat="server" /> </ItemTemplate>
					</asp:TemplateField>
					<asp:TemplateField HeaderText="Content">
						<ItemTemplate>
							<asp:Label ID="lblContent" runat="server" Text='<% #Eval("Content") %>'></asp:Label>
						</ItemTemplate>
					</asp:TemplateField>
				</Columns>
			</asp:GridView>
		</div>
	</form>
</body>

</html>

Code behind

using System;
using System.Data;

public partial class Check_All_Demo: System.Web.UI.Page {
	protected void Page_Load(object sender, EventArgs e) {
		if (!IsPostBack) {
			DataSet ds = new DataSet();
			ds.ReadXml(Server.MapPath("~/Content.xml"));
			GridView1.DataSource = ds.Tables[0];
			GridView1.DataBind();
		}
	}

}

Xml file

<root>
  <book content="Content1"></book>
  <book content="Content2"></book>
</root>

Posted By -	Karan Gupta

Posted On -	Thursday, September 6, 2012

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**