Implement check uncheck all CheckBox in ASP.Net GridView with paging using JavaScript

Hi jtautomations...,

Please refer below sample.

HTML

<asp:HiddenField ID="hfPageSize" runat="server" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
    AllowPaging="true" PageSize="3" OnPageIndexChanging="OnPageIndexChanging">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkAll" runat="server" onclick="SelectAll(this)" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chk" runat="server" onclick="SelectOne(this)" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
    </Columns>
</asp:GridView>
<script type="text/javascript">
    function SelectAll(headerCheckBox) {
        var pageSize = document.getElementById("hfPageSize").value;
        //Get the reference of GridView.
        var GridView = headerCheckBox.parentNode.parentNode.parentNode;
        //Loop through all GridView Rows except first row.
        for (var i = 1; i <= pageSize; i++) {
            //Reference the CheckBox.
            if (GridView.rows[i] != undefined) {
                if (GridView.rows[i].cells[0].getElementsByTagName("input").length > 0) {
                    var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
                    checkBox.checked = headerCheckBox.checked;
                }
            }
        }
    }

    function SelectOne(chk) {
        var pageSize = document.getElementById("hfPageSize").value;
        //Get the reference of GridView.
        var GridView = chk.parentNode.parentNode.parentNode;

        //Reference the Header CheckBox.
        var headerCheckBox = GridView.rows[0].cells[0].getElementsByTagName("input")[0];;

        var checked = true;

        //Loop through all GridView Rows.
        for (var i = 1; i <= pageSize; i++) {
            //Reference the CheckBox.
            if (GridView.rows[i] != undefined) {
                if (GridView.rows[i].cells[0].getElementsByTagName("input").length > 0) {
                    var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
                    if (!checkBox.checked) {
                        checked = false;
                        break;
                    }
                }
            }
        }

        headerCheckBox.checked = checked;
    };
</script>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    hfPageSize.Value = GridView1.PageSize.ToString();
    if (!this.IsPostBack)
    {
        this.BindGrid();
    }
}

protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView1.PageIndex = e.NewPageIndex;
    this.BindGrid();
}

private void BindGrid()
{
    DataTable dt = new DataTable();
    dt.Columns.AddRange(new DataColumn[3] { 
        new DataColumn("Id"), 
        new DataColumn("Name"), 
        new DataColumn("Country") });
    dt.Rows.Add(1, "John Hammond", "United States");
    dt.Rows.Add(2, "Mudassar Khan", "India");
    dt.Rows.Add(3, "Suzanne Mathews", "France");
    dt.Rows.Add(4, "Robert Schidner", "Russia");
    GridView1.DataSource = dt;
    GridView1.DataBind();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    hfPageSize.Value = GridView1.PageSize.ToString()

    If Not Me.IsPostBack Then
        Me.BindGrid()
    End If
End Sub

Protected Sub OnPageIndexChanging(ByVal sender As Object, ByVal e As GridViewPageEventArgs)
    GridView1.PageIndex = e.NewPageIndex
    Me.BindGrid()
End Sub

Private Sub BindGrid()
    Dim dt As DataTable = New DataTable()
    dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
    dt.Rows.Add(1, "John Hammond", "United States")
    dt.Rows.Add(2, "Mudassar Khan", "India")
    dt.Rows.Add(3, "Suzanne Mathews", "France")
    dt.Rows.Add(4, "Robert Schidner", "Russia")
    GridView1.DataSource = dt
    GridView1.DataBind()
End Sub

Screenshot