Wednesday, September 19, 2012

Check / UnCheck Gridview page / All Pages CheckBoxes using Jquery in ASP.Net and c#.Net

In the previous post Check / UnCheck Gridview page CheckBoxes using Jquery in ASP.Net which checks only current page checkboxes of the gridview using Jquery and looses checkbox state when the gridview page was changed.

Here i will show how to check all the check boxes using c#.Net and it maintains checkbox state when gridpages are changed.

ASPX Page :

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MainPage.aspx.cs" 
                                 Inherits="CheckUnCheck_Jquery.MainPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
<html xmlns="">
<head runat="server">
    <title>Check Uncheck All checkBoxes in gridview page</title>
    <script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function CheckUnCheckAll(chk) {
            $('#<%=gvCheckAll.ClientID %>').find("input:checkbox").each(function () {
                if (this != chk) {
                    this.checked = chk.checked;
    <form id="form1" runat="server">
                Check/Uncheck All checkBoxes in gridview All pages<br />
                using Jquery and C#.Net</h2>               
                <asp:CheckBox ID="chkAll" runat="server" Text="Check All CheckBoxes " 
                TextAlign="Left" ForeColor="Green" AutoPostBack="true" 
            <asp:GridView ID="gvCheckAll" runat="server" BackColor="White"
                AutoGenerateColumns="false" BorderColor="#CC9966"  
                BorderStyle="None" BorderWidth="1px" CellPadding="4" AllowPaging="true"
                OnRowDataBound="gvCheckAll_RowDataBound" >
                    <asp:TemplateField HeaderText="EMP ID">
                            <asp:Label ID="lblempid" runat="server" 
                                            Text='<%# Eval("empid") %>' />
                    <asp:TemplateField HeaderText="DeptID">
                            <asp:Label ID="lbldeptid" runat="server"  
                                            Text='<%# Eval("deptid") %>' />
                    <asp:TemplateField HeaderText="Full Name">
                            <asp:Label ID="lblfullname" runat="server"  
                                            Text='<% #Eval("fullname") %>' />
                    <asp:TemplateField HeaderText="Designation">
                            <asp:Label ID="lbldes" runat="server"  
                                            Text='<%# Eval("designation") %>' />
                    <asp:TemplateField HeaderText="Qualification">
                            <asp:Label ID="lblqual" runat="server" 
                                             Text='<%# Eval("qualification") %>' />
                            <asp:CheckBox ID="chkMain" runat="server" 
                                   onclick="javascript:CheckUnCheckAll(this);" />
                            <asp:CheckBox ID="chkChild" runat="server" />
                <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
                <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
                <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
                <RowStyle BackColor="White" ForeColor="#330099" />
                <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
                <SortedAscendingCellStyle BackColor="#FEFCEB" />
                <SortedAscendingHeaderStyle BackColor="#AF0101" />
                <SortedDescendingCellStyle BackColor="#F6F0C0" />
                <SortedDescendingHeaderStyle BackColor="#7E0000" />

CodeBehind :

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web.UI.WebControls;
namespace CheckUnCheck_Jquery
    public partial class MainPage : System.Web.UI.Page
        protected void Page_Load(object sender, EventArgs e)
            if (!IsPostBack)
        private void gridviewBind()
            string constring =  
            string query = "select e.empid, e.DeptID,(e.fname +' '+e.lname) as fullname,
                      e.designation,e .qualification  from EMPTable e";
            DataSet ds = new DataSet();
            SqlDataAdapter da = new SqlDataAdapter(query, constring);
            gvCheckAll.DataSource = ds;
        protected void gvCheckAll_PageIndexChanging(object sender, 
                                System.Web.UI.WebControls.GridViewPageEventArgs e)
            gvCheckAll.PageIndex = e.NewPageIndex;
        protected void gvCheckAll_RowDataBound(object sender, GridViewRowEventArgs e)
            if (e.Row.RowType == DataControlRowType.DataRow)
                if (chkAll.Checked)
                    ((CheckBox)gvCheckAll.HeaderRow.FindControl("chkMain")).Enabled = false;
                    ((CheckBox)gvCheckAll.HeaderRow.FindControl("chkMain")).Enabled = true;
                ((CheckBox)e.Row.FindControl("chkChild")).Checked = chkAll.Checked;
        protected void chkAll_CheckedChanged(object sender, EventArgs e)
DownLoad from HERE


  1. Impressive Article . . . Works Awesome

  2. Thanks! I made this small addition to handle things, in case you have 2 checkbox (columns) in the grid. By using the JQuery "id-ends-with" function (aka, the "id*=" seen below)

    function CheckUnCheckAll(chk) {
    $('#<%=gvCheckAll.ClientID %>').find("input:checkbox[id*='chkChild']").each(function (i, currentChkBox) {
    if (this != chk) {
    this.checked = chk.checked;