Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery

Category > ASP.NET || Published on : Thursday, January 28, 2016 || Views: 9160 || Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery Check UnCheck All CheckBoxes


Introduction

Here Pawan Kumar will explain how to Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery

Description

In previous post I have explained How to avoid a form from double submission using asp.net, Set max length of MultiLine TextBox in ASP.Net, Allow only alphabets in a textbox using javascript in asp.net, jQuery, ASP.NET - How to validate the file type and file size of File Upload control on file selection using the jQuery .Change() event, Create a QR Code with a Logo in ASP.Net C#, jQuery to Check UnCheck All CheckBoxes in Repeater in Asp.Net C#, and many more articles.

Now I will explain How to Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery

So follow the steps to learn Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery

In this article I have explained How to check uncheck or select deselect all checkboxes on click of Select All checkbox in header in Asp.Net GridView using jQuery.

Step 1:Create a aspx web page using the below codes:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var chkAll = $('.header').click(function () {
                //Check header and item's checboxes on click of header checkbox
                chkItem.prop('checked', $(this).is(':checked'));
            });
            var chkItem = $(".item").click(function () {
                //If any of the item's checkbox is unchecked then also uncheck header's checkbox
                chkAll.prop('checked', chkItem.filter(':not(:checked)').length == 0);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="grdEmp" runat="server" AutoGenerateColumns="False" CellPadding="4"
            ForeColor="#333333" GridLines="None">
            <AlternatingRowStyle BackColor="White" />
            <Columns>
                <asp:TemplateField>
                    <HeaderTemplate>
                        <input type="checkbox" id="chkHeader" class="header" />
                    </HeaderTemplate>
                    <ItemTemplate>
                        <input type="checkbox" id="chkItems" class="item" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" />
                <asp:BoundField HeaderText="Code" DataField="EmployeeCode" />
                <asp:BoundField HeaderText="Age" DataField="Age" />
            </Columns>
            <EditRowStyle BackColor="#2461BF" />
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <RowStyle BackColor="#EFF3FB" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <SortedAscendingCellStyle BackColor="#F5F7FB" />
            <SortedAscendingHeaderStyle BackColor="#6D95E1" />
            <SortedDescendingCellStyle BackColor="#E9EBEF" />
            <SortedDescendingHeaderStyle BackColor="#4870BE" />
        </asp:GridView>
    </div>
    </form>
</body>
</html>

Step 2: Write the following codes in aspx 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;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindGridview();
        }
    }
    protected void BindGridview()
    {
        DataTable dt = new DataTable();
        //Add Columns to datatable
        dt.Columns.Add("EmployeeId", typeof(Int32));
        dt.Columns.Add("EmployeeName", typeof(string));
        dt.Columns.Add("EmployeeCode", typeof(string));
        dt.Columns.Add("Age", typeof(Int32));
        //Adding rows and data
        dt.Rows.Add(1, "Rahul", "EMP0001", 22);
        dt.Rows.Add(2, "Sanjay", " EMP0002", 21);
        dt.Rows.Add(3, "Raja", " EMP0003", 24);
        dt.Rows.Add(4, "Barkha", " EMP0004", 26);
        dt.Rows.Add(5, "Suman", " EMP0005", 25);
        //Bind datatable to gridview
        grdEmp.DataSource = dt;
        grdEmp.DataBind();
    }

}

 

 

 

 

 

Conclusion:

So, In this tutorial we have learned, Check UnCheck All CheckBoxes in Asp.Net GridView using jQuery

Download Source Codes