Click here to Skip to main content
12,956,410 members (77,025 online)
Click here to Skip to main content
Add your own
alternative version


5 bookmarked
Posted 20 Apr 2011

Select all checkbox in the data grid

, 20 Apr 2011 CPOL
Rate this:
Please Sign up or sign in to vote.


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.


<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;
        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;
        function ChildClick(CheckBox, HCheckBox) {
            //get target base & child control.
            var HeaderCheckBox = document.getElementById(HCheckBox);
            //Modifiy Counter;
            if (CheckBox.checked && Counter < TotalChkBx) {
            else if (Counter > 0) {
            //Change state of the header CheckBox.
            if (Counter < TotalChkBx) {
                HeaderCheckBox.checked = false;
            else if (Counter == TotalChkBx) {
                HeaderCheckBox.checked = true;
        function RowCount(Counter) 
            //To display the count how much Check-boxes selected in Grid while selection
            document.getElementById('divSelectedRows').innerHTML = 'Selected Rows : ' + Counter;
    <form id="form1"  runat="server">
        <div id="divSelectedRows">Selected Rows : 0</div>
        <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" />
                        <asp:checkbox id="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" />

    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
    protected void BindGridView()
        gvCheckboxes.DataSource = GetDataSource(1000);//1000 Rows
    protected DataTable GetDataSource(int Rows)
        DataTable dTable = new DataTable();
        DataRow dRow = null;
        for (int n = 1; n <= Rows; ++n)
            dRow = dTable.NewRow();
            dRow["SNo"] = n + ".";
        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


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.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
India India
Retired from Q/A section & Technical forums since 2014

More coming soon....

You may also be interested in...


Comments and Discussions

GeneralNice one. Helpful tip indeed! Pin
a.pranav25-Apr-11 21:41
membera.pranav25-Apr-11 21:41 
GeneralReason for my vote of 5 Nice Tip. :thumbsup: Pin
Kunal_Chowdhury20-Apr-11 21:14
mvpKunal_Chowdhury20-Apr-11 21:14 
GeneralRe: BTW, don't forget to test it in IE 10 too. The platform prev... Pin
Kunal_Chowdhury20-Apr-11 21:16
mvpKunal_Chowdhury20-Apr-11 21:16 
GeneralReason for my vote of 5 It's Nice, BTW, GIT thread drove me ... Pin
Gandalf - The White20-Apr-11 19:03
memberGandalf - The White20-Apr-11 19:03 
GeneralI use the same method to Select All which is OK. But it is O... Pin
Venkatesh Mookkan20-Apr-11 16:34
memberVenkatesh Mookkan20-Apr-11 16:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170525.1 | Last Updated 20 Apr 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid