Click here to Skip to main content
Click here to Skip to main content

Check/uncheck CheckBox in a GridView using Javascript

, 29 Mar 2008
Rate this:
Please Sign up or sign in to vote.
Check/uncheck CheckBox control inside a GridView using javascript without postback.


Check/uncheck CheckBox control inside a GridView using javascript without postback. This article will give an idea on how to achieve this task.

Some sample code is provided under Using the code heading and complete code is available in the project download.


(Forums are flooded with the questions about how to check/uncheck CheckBox control inside a GridView using javascript without postback.

How To’s:

In this article a GridView control is used. Inside the GridView control there are 3 fields. One template field and two are bound fields to display some sample data.

Inside the TemplateField a CheckBox control is placed in the HeaderTemplate (with ID cbSelectAll and Text Select All), ItemTemplate and AlternatingItemTemplate.

Using the code

Code that will be required to achieve this task.

Javascript that will be required to perform the Select All action is as follow:

    <script type="text/javascript">
        function <code>SelectAll(id)</code>
            //get reference of GridView control
            <code>var</code> grid = document.getElementById("<%= GridView1.ClientID %>");
            //variable to contain the cell of the grid
            <code>var</code> cell;
            if (grid.rows.length > 0)
                //loop starts from 1. rows[0] points to the header.
                for (i=1; i<grid.rows.length; i++)
                    //get the reference of first column
                    cell = grid.rows[i].cells[0];
                    //loop according to the number of childNodes in the cell
                    for (j=0; j<cell.childNodes.length; j++)
                        //if childNode type is CheckBox                 
                        if (cell.childNodes[j].type =="checkbox")
                        //assign the status of the Select All checkbox to the cell checkbox within the grid
                            cell.childNodes[j].checked = document.getElementById(id).checked;

Code required to add an attribute of cbSelectAll CheckBox is as follow:

    protected void Page_Load(object sender, EventArgs e)
        if (!IsPostBack)
            //Binding GridView with the datasource

            //FillDataTable is a method that will return a DataTable
            //filled with some rows (code available in download)
            this.GridView1.DataSource = FillDataTable();

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
        if (e.Row.RowType == DataControlRowType.Header)
            //Find the checkbox control in header and add an attribute
            ((CheckBox)e.Row.FindControl("cbSelectAll")).Attributes.Add("onclick", "javascript:SelectAll('" + 
                    ((CheckBox)e.Row.FindControl("cbSelectAll")).ClientID + "')");

Before clicking the Select All CheckBox

After clicking the Select All CheckBox


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

About the Author

Web Developer
United Arab Emirates United Arab Emirates
Faraz is working as a Senior Software Engineer for a company located in Sharjah, UAE. He likes developing new applications with the latest technologies. Mostly reponsible for web applications using Microsoft.Net. He has done MCPD so far. Other than work play guitars, sing and play PSP.

Comments and Discussions

GeneralMy vote of 5 PinmemberDeepanjan Dey5-Jan-12 2:28 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140709.1 | Last Updated 29 Mar 2008
Article Copyright 2008 by farazsk11
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid