Description

Select/Clear all Check-boxes in grid. Here using GridView. Additionally it shows the count in display how much Check-boxes selected in Grid while selection.

Code

<html>
<head  runat="server">
    <title>Select/Clear Checkboxes in Grid</title>
    <script type="text/javascript">
        var TotalChkBx;
        var Counter;
        
        window.onload = function()
        {
            //Get total no. of CheckBoxes in side the GridView.
            TotalChkBx = parseInt('<%= this.gvCheckboxes.Rows.Count %>');
            //Get total no. of checked CheckBoxes in side the GridView.
            Counter = 0;
            RowCount(Counter);
        }
        
        function HeaderClick(CheckBox)
        {
            //Get target base & child control.
            var TargetBaseControl = document.getElementById('<%= this.gvCheckboxes.ClientID %>');
            var TargetChildControl = "chkBxSelect";
            
            //Get all the control of the type INPUT in the base control.
            var Inputs = TargetBaseControl.getElementsByTagName("input");
            
            //Checked/Unchecked all the checkBoxes in side the GridView.
            for (var n = 0; n < Inputs.length; ++n) 
            {
                if (Inputs[n].type == 'checkbox' && Inputs[n].id.indexOf(TargetChildControl, 0) >= 0) 
                {
                    Inputs[n].checked = CheckBox.checked;
                }
                //Reset Counter
                Counter = CheckBox.checked ? TotalChkBx : 0;
            }
            RowCount(Counter);
        }
        
        function ChildClick(CheckBox, HCheckBox) {
            //get target base & child control.
            var HeaderCheckBox = document.getElementById(HCheckBox);
                     
            //Modifiy Counter;
            if (CheckBox.checked && Counter < TotalChkBx) {
                Counter++;
            }
            else if (Counter > 0) {
                Counter--;
            }   
            //Change state of the header CheckBox.
            if (Counter < TotalChkBx) {
                HeaderCheckBox.checked = false;
            }
            else if (Counter == TotalChkBx) {
                HeaderCheckBox.checked = true;
            }
            RowCount(Counter);
        }

        function RowCount(Counter) 
        {
            //To display the count how much Check-boxes selected in Grid while selection
            document.getElementById('divSelectedRows').innerHTML = 'Selected Rows : ' + Counter;
        }
    </script>

</head>
<body>
    <form id="form1"  runat="server">
        Selected Rows : 0
        <asp:gridview id="gvCheckboxes" runat="server" autogeneratecolumns="False" onrowcreated="gvCheckboxes_RowCreated">
            
                <asp:boundfield headertext="S.No" datafield="SNo">
                <asp:templatefield headertext="Select">
                    
                        <asp:checkbox id="chkBxSelect" runat="server" />
                    
                    <headertemplate>
                        <asp:checkbox id="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />
                    </headertemplate>
                <asp:templatefield>
            
        <asp:gridview>
    </form>
</body>
</html>

    protected void Page_Load(object sender, EventArgs e)
    {        
        if (!IsPostBack)
        {
            BindGridView();
        }
    }

    protected void BindGridView()
    {
        gvCheckboxes.DataSource = GetDataSource(1000);//1000 Rows
        gvCheckboxes.DataBind();
    }

    protected DataTable GetDataSource(int Rows)
    {
        DataTable dTable = new DataTable();
        DataRow dRow = null;
        dTable.Columns.Add("SNo");
        for (int n = 1; n <= Rows; ++n)
        {
            dRow = dTable.NewRow();
            dRow["SNo"] = n + ".";
            dTable.Rows.Add(dRow);
            dTable.AcceptChanges();
        }
        return dTable;
    }

    protected void gvCheckboxes_RowCreated(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            CheckBox chkBxSelect = (CheckBox)e.Row.Cells[1].FindControl("chkBxSelect");
            CheckBox chkBxHeader = (CheckBox)this.gvCheckboxes.HeaderRow.FindControl("chkBxHeader");
            chkBxSelect.Attributes["onclick"] = string.Format("javascript:ChildClick(this,'{0}');", chkBxHeader.ClientID);
        }
    }

Browser Compatibility

I have tested this script in the following Web browsers:

Internet Explorer
Mozilla Firefox
Google Chrome
Safari
Opera

Reference

I want to acknowledge this author[^] for his article[^]. Thanks to him. Actually I have changed/reduced things(in his code) & posted here as a Tip/Trick.

Select all checkbox in the data grid