Articles → JQUERY → check and uncheck all checkboxes using jQuery and asp.net

check and uncheck all checkboxes using jQuery and asp.net





  1. Software Requirement
  2. Prerequisite knowledge
  3. Creation of a project
  4. Adding content in xml file
  5. Add gridview in aspx page
  6. Adding ‘Delete All’ checkbox on the page
  7. Bind grid from xml
  8. Adding jQuery code
  9. Output
  10. Complete Code

Software Requirement




  1. Visual studio 2005 (or above) is installed on your machine.
  2. 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




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

Creation of a project




  1. Check_All_Demo.aspx
  2. Content.xml


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

Click to Enlarge


Adding content in xml file




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





Add gridview 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




<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




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




<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>







Output


Picture showing the output of the check and uncheck all checkboxes using jQuery and asp.net

Click to Enlarge


Complete 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>




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();
		}
	}

}




<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/FeedbackCharacters remaining 250