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

check and uncheck all checkboxes using jQuery

and asp.net


























Software Requirement









Prerequisite knowledge

















Creation of a project











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



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 06, 2012

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250