Click here to Skip to main content
14,303,116 members

Select all checkbox in the data grid

Rate this:
5.00 (3 votes)
Please Sign up or sign in to vote.
5.00 (3 votes)
20 Apr 2011CPOL


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....

Comments and Discussions

GeneralNice one. Helpful tip indeed! Pin
Pranav Ainavolu25-Apr-11 21:41
memberPranav Ainavolu25-Apr-11 21:41 
GeneralReason for my vote of 5 Nice Tip. :thumbsup: Pin
Kunal Chowdhury «IN»20-Apr-11 21:14
mentorKunal Chowdhury «IN»20-Apr-11 21:14 
GeneralRe: BTW, don't forget to test it in IE 10 too. The platform prev... Pin
Kunal Chowdhury «IN»20-Apr-11 21:16
mentorKunal Chowdhury «IN»20-Apr-11 21:16 
GeneralReason for my vote of 5 It's Nice, BTW, GIT thread drove me ... Pin
Gandalf_TheWhite20-Apr-11 19:03
professionalGandalf_TheWhite20-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.

Posted 20 Apr 2011


6 bookmarked