Click here to Skip to main content
13,291,084 members (58,150 online)
Click here to Skip to main content
Add your own
alternative version


104 bookmarked
Posted 27 Jan 2008

Selecting / Deselecting all the CheckBoxes Inside a GridView

, 9 May 2008
Rate this:
Please Sign up or sign in to vote.
This article describes how to select and unselect all the checkboxes inside a GridView control.



I am going to present here a functionality that selects / deselects all checkboxes of a particular column inside a GridView control, provided the header checkbox of that column is checked or unchecked using JavaScript. This functionality also has a feature that when all checkboxes of a particular column inside the GridView are checked, then the header</code /> checkbox gets checked, and vice versa.

Using the code

I have used a TemplateField inside the GridView and put a CheckBox in the ItemTemplate as well as another CheckBox in the HeaderTemplate of the TemplateField.

The HTML code looks like this:

<asp:GridView ID="gvCheckboxes" runat="server" 

              AutoGenerateColumns="False" OnRowCreated="gvCheckboxes_RowCreated">
      <asp:BoundField HeaderText="S.N." DataField="sno">
         <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
      <asp:TemplateField HeaderText="Select">
            <asp:CheckBox ID="chkBxSelect" runat="server" />
         <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
            <asp:CheckBox ID="chkBxHeader" 

                 onclick="javascript:HeaderClick(this);" runat="server" />
            <asp:CheckBox ID="chkBx" runat="server" />
         <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
   <RowStyle BackColor="Moccasin" />
   <AlternatingRowStyle BackColor="NavajoWhite" />
   <HeaderStyle BackColor="DarkOrange" Font-Bold="true" ForeColor="white" />

Attach a client-side onclick event on the header checkbox [chkBxHeader].

<asp:CheckBox ID="chkBxHeader" onclick="javascript:HeaderClick(this);" runat="server" /> 

Put the following code in the GridView's RowCreated event:

if (e.Row.RowType == DataControlRowType.DataRow && 
   (e.Row.RowState == DataControlRowState.Normal ||
    e.Row.RowState == DataControlRowState.Alternate))
   CheckBox chkBxSelect = (CheckBox)e.Row.Cells[1].FindControl("chkBxSelect");
   CheckBox chkBxHeader = (CheckBox)this.gvCheckboxes.HeaderRow.FindControl("chkBxHeader");
   chkBxSelect.Attributes["onclick"] = string.Format

In the above code, a client side onclick event has been attached to the child checkbox [chkBxChild].

Add this JavaScript in the page’s head section:

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

In the above script, there are two global variables: TotalChkBx and Counter. These are initialised in the window.onload event. There are two methods: HeaderClick and ChildClick. The method HeaderClick checks / unchecks all checkboxes of a particular column inside the GridView depending upon whether the header checkbox is checked or unchecked. The method ChildClick checks / unchecks the header checkbox depending upon whether all checkboxes of a particular column inside the GridView are checked or unchecked.

Just download the sample application and enjoy coding! I hope you will like this article.

Supported browsers

I have tested this script on the following browsers:



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


About the Author

Technical Lead Infogain India Pvt Ltd
India India

Samir NIGAM is a Microsoft Certified Professional. He is an insightful IT professional with results-driven comprehensive technical skill having rich, hands-on work experience n web-based applications using ASP.NET, C#, AJAX, Web Service, WCF, jQuery, Microsoft Enterprise Library , LINQ, MS Entity Framework, nHibernate, MS SQL Server & SSRS.

He has earned his master degree (MCA) from U.P. Technical University, Lucknow, INDIA, his post graduate dipoma (PGDCA ) from Institute of Engineering and Rural Technology, Allahabad, INDIA and his bachelor degree (BSc - Mathematics) from University of Allahabad, Allahabad, INDIA.

He has good knowledge of Object Oriented Programming, n-Tier Architecture, SOLID Principle, and Algorithm Analysis & Design as well as good command over cross-browser client side programming using JavaScript & jQuery,.


You may also be interested in...

Comments and Discussions

QuestionThank you!!! Pin
sandy03441-Mar-16 9:33
membersandy03441-Mar-16 9:33 
Questionnested grid view Pin
Member 1021767823-Apr-15 22:05
memberMember 1021767823-Apr-15 22:05 
QuestionPerfecto :) Pin
sanamshaikh2-Feb-15 10:46
membersanamshaikh2-Feb-15 10:46 
QuestionExcellent Pin
barsan10125-Jun-13 21:51
memberbarsan10125-Jun-13 21:51 
GeneralMy vote of 5 Pin
robzz212-Sep-12 23:02
memberrobzz212-Sep-12 23:02 
GeneralMy vote of 5 Pin
chetan virkar25-May-12 22:57
memberchetan virkar25-May-12 22:57 
GeneralMy vote of 5 Pin
bhaskarareddy4-May-12 2:35
memberbhaskarareddy4-May-12 2:35 
GeneralMy vote of 4 Pin
dtsfi14-Mar-12 2:22
memberdtsfi14-Mar-12 2:22 
GeneralMy vote of 2 Pin
califf2221-Jan-12 7:22
membercaliff2221-Jan-12 7:22 
GeneralThank You..nice Article Pin
Praveen kumar. Bhuvanagiri13-Jan-12 1:25
memberPraveen kumar. Bhuvanagiri13-Jan-12 1:25 
QuestionError in select all Pin
Soner Sari11-Jan-12 2:53
memberSoner Sari11-Jan-12 2:53 
GeneralThanks! Pin
yaroopig17-Nov-11 16:32
memberyaroopig17-Nov-11 16:32 
GeneralMy vote of 5 Pin
Manu K.Jayadev26-May-11 0:38
memberManu K.Jayadev26-May-11 0:38 
GeneralMy vote of 5 Pin
theintoehan10-Mar-11 19:26
membertheintoehan10-Mar-11 19:26 
GeneralMy vote of 5 Pin
ankurbhutani26-Feb-11 9:25
memberankurbhutani26-Feb-11 9:25 
GeneralMy vote of 5 Pin
Thrinath reddy25-Feb-11 1:28
memberThrinath reddy25-Feb-11 1:28 
GeneralMy vote of 5 Pin
jcrussell23-Feb-11 1:34
memberjcrussell23-Feb-11 1:34 
GeneralSlight Change Pin
jcrussell23-Feb-11 1:32
memberjcrussell23-Feb-11 1:32 
GeneralMy vote of 5 Pin
noblevaibhav4-Feb-11 7:04
membernoblevaibhav4-Feb-11 7:04 
GeneralMy vote of 5 Pin
soul negi21-Sep-10 3:46
membersoul negi21-Sep-10 3:46 
GeneralPb with value rows.count() Pin
gdoub12-Apr-10 4:38
membergdoub12-Apr-10 4:38 
Generalwell done Pin
Donsw18-Apr-09 11:34
memberDonsw18-Apr-09 11:34 
GeneralRe: well done Pin
Samir NIGAM14-Sep-09 2:35
mvpSamir NIGAM14-Sep-09 2:35 
GeneralHelpful article Pin
Sanjay4India6-Apr-09 2:40
memberSanjay4India6-Apr-09 2:40 
GeneralRe: Helpful article Pin
Samir NIGAM14-Sep-09 2:36
mvpSamir NIGAM14-Sep-09 2:36 
GeneralRe: Helpful article Pin
Samir NIGAM17-Sep-09 11:09
mvpSamir NIGAM17-Sep-09 11:09 
QuestionNot working inside UpdatePanel Pin
Tamil Mannan9-Mar-09 21:12
memberTamil Mannan9-Mar-09 21:12 
AnswerRe: Not working inside UpdatePanel Pin
Samir NIGAM14-Sep-09 2:52
mvpSamir NIGAM14-Sep-09 2:52 
Generalsimplified version Pin
Jim Brooks24-Feb-09 11:44
memberJim Brooks24-Feb-09 11:44 
GeneralRe: simplified version Pin
Samir NIGAM14-Sep-09 2:55
mvpSamir NIGAM14-Sep-09 2:55 
Generalissue with paging on postback with filtered records Pin
svknair27-Jan-09 2:32
membersvknair27-Jan-09 2:32 
GeneralRe: issue with paging on postback with filtered records Pin
Samir NIGAM14-Sep-09 2:59
mvpSamir NIGAM14-Sep-09 2:59 
Generalerror in using the selectall checkbox Pin
svknair27-Jan-09 2:22
membersvknair27-Jan-09 2:22 
GeneralRe: error in using the selectall checkbox Pin
Samir NIGAM14-Sep-09 2:57
mvpSamir NIGAM14-Sep-09 2:57 
GeneralPaging Issue Pin
CoolBreeze81230-May-08 5:10
memberCoolBreeze81230-May-08 5:10 
GeneralRe: Paging Issue Pin
SAMir Nigam30-May-08 20:27
member SAMir Nigam 30-May-08 20:27 
GeneralRe: Paging Issue Pin
CoolBreeze81231-May-08 4:26
memberCoolBreeze81231-May-08 4:26 
GeneralError when datasource is empty Pin
Petr Stejskal4-May-08 10:54
memberPetr Stejskal4-May-08 10:54 
GeneralRe: Error when datasource is empty Pin
Samir Nigam6-May-08 20:46
member Samir Nigam 6-May-08 20:46 
Generalhi Pin
Mohamad Kaifi2-May-08 19:23
memberMohamad Kaifi2-May-08 19:23 
GeneralRe: hi Pin
Samir Nigam2-May-08 19:29
member Samir Nigam 2-May-08 19:29 
GeneralRe: hi Pin
Mohamad Kaifi2-May-08 19:32
memberMohamad Kaifi2-May-08 19:32 
GeneralRe: hi Pin
Samir Nigam3-May-08 0:51
member Samir Nigam 3-May-08 0:51 
Questionhow to include javascript functions instead of placing in the aspx file? Pin
Petr Stejskal1-May-08 9:46
memberPetr Stejskal1-May-08 9:46 
AnswerRe: how to include javascript functions instead of placing in the aspx file? [modified] Pin
Samir Nigam1-May-08 20:17
member Samir Nigam 1-May-08 20:17 
GeneralRe: how to include javascript functions instead of placing in the aspx file? Pin
tfpayne7224-Nov-08 10:10
membertfpayne7224-Nov-08 10:10 
GeneralRe: how to include javascript functions instead of placing in the aspx file? Pin
Sameer NIGAM24-Nov-08 19:21
memberSameer NIGAM24-Nov-08 19:21 
Questionhow to create dropdownlist option in grid view control Pin
Pragya Khatri24-Feb-08 20:07
memberPragya Khatri24-Feb-08 20:07 
AnswerRe: how to create dropdownlist option in grid view control Pin
SAMir Nigam21-May-08 19:09
member SAMir Nigam 21-May-08 19:09 
Generalhighlight row Pin
Tim Vandeweerd19-Feb-08 9:38
memberTim Vandeweerd19-Feb-08 9:38 

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
Web01 | 2.8.171207.1 | Last Updated 10 May 2008
Article Copyright 2008 by Samir NIGAM
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid