Check and uncheck All Checkboxes in Grid view using javascript


Sno Name Emp No Designation
0 Name-0 Empno-0 Designation-0
1 Name-1 Empno-1 Designation-1
2 Name-2 Empno-2 Designation-2
3 Name-3 Empno-3 Designation-3
4 Name-4 Empno-4 Designation-4
5 Name-5 Empno-5 Designation-5
6 Name-6 Empno-6 Designation-6
7 Name-7 Empno-7 Designation-7
8 Name-8 Empno-8 Designation-8
9 Name-9 Empno-9 Designation-9
10 Name-10 Empno-10 Designation-10
11 Name-11 Empno-11 Designation-11
12 Name-12 Empno-12 Designation-12
13 Name-13 Empno-13 Designation-13
14 Name-14 Empno-14 Designation-14



Aspx Page:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication2.WebForm2" %> <!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 type="text/javascript"> function checkAll(gvExample, colIndex) { var GridView = gvExample.parentNode.parentNode.parentNode; for (var i = 1; i < GridView.rows.length; i++) { var chb = GridView.rows[i].cells[colIndex].getElementsByTagName("input")[0]; chb.checked = gvExample.checked; } } function checkItem_All(objRef, colIndex) { var GridView = objRef.parentNode.parentNode.parentNode; var selectAll = GridView.rows[0].cells[colIndex].getElementsByTagName("input")[0]; if (!objRef.checked) { selectAll.checked = false; } else { var checked = true; for (var i = 1; i < GridView.rows.length; i++) { var chb = GridView.rows[i].cells[colIndex].getElementsByTagName("input")[0]; if (!chb.checked) { checked = false; break; } } selectAll.checked = checked; } } </script> </head> <body> <form id="form1" runat="server"> <div> <asp:GridView ID="gvExample" runat="server" AutoGenerateColumns="false" AlternatingRowStyle-BackColor="#C2D69B" HeaderStyle-BackColor="#C2D69B"> <Columns> <asp:TemplateField> <HeaderTemplate> <asp:CheckBox ID="chkAll" runat="server" onclick="checkAll(this,0);" /> </HeaderTemplate> <ItemTemplate> <asp:CheckBox ID="chkitem" runat="server" onclick="checkItem_All(this,0)" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Sno" HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Left"> <ItemTemplate> <asp:Label ID="lblSno" runat="server" Text='<%# Bind("SNO") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Name" HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Left"> <ItemTemplate> <asp:Label ID="lblName" runat="server" Text='<%# Bind("Name") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Emp No" HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Left"> <ItemTemplate> <asp:Label ID="lblEmpno" runat="server" Text='<%# Bind("Empno") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Designation" HeaderStyle-Width="100px" HeaderStyle-HorizontalAlign="Left"> <ItemTemplate> <asp:Label ID="lblDesignation" runat="server" Text='<%# Bind("Designation") %>'></asp:Label> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> </body> </html>


Code Behind :

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; namespace WebApplication2 { public partial class WebForm2 : System.Web.UI.Page { DataTable dt = new DataTable(); DataRow dr; protected void Page_Load(object sender, EventArgs e) { bindGrid(); } public void bindGrid() { dt.Columns.Add("SNO"); dt.Columns.Add("Name"); dt.Columns.Add("Empno"); dt.Columns.Add("Designation"); for (int i = 0; i < 15; i++) { dr = dt.NewRow(); dr["SNO"] = i; dr["Name"] = "Name-" + i; dr["Empno"] = "Empno-" + i; dr["Designation"] = "Designation-" + i; dt.Rows.Add(dr); dt.AcceptChanges(); gvExample.DataSource = dt; gvExample.DataBind(); } } } }