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

Check, Uncheck the CheckBoxes of DataGrid using JavaScript

, 26 Jan 2009
Rate this:
Please Sign up or sign in to vote.
The code handles any DataControl's CheckBoxes Check, Uncheck on Client Side

Introduction

Very often, we face a situation where we have placed checkboxes inside any data control like repeater, datagrid, gridview, datalist, etc. and we want to perform all the check, uncheck actions on the client side. Here is the solution using JavaScript. Note: Different data controls may need some changes. Here, I have carried out my work on GridView.

Background

To use this code, we should have a basic knowledge of JavaScript, i.e.

  • How the function is defined?
  • How the parameter in the function is passed and used?
  • How the variable is defined?

Using the Code

The example I have posted here is fully functional, but as I have stated earlier I have used GridView. However, the code is compatible with any DataControl available in ASP.NET. All we need is to change the parameter that we are passing on the ClientClick of the CheckBox in HeaderRow and CheckBox in ItemRow.

    //This function checks the HeaderCheckBox if all the ChildCheckBoxes are Selected
    //and deselects the HeaderCheckBox if even a single ChildCheckBox is DeSelected.
    function check(DataControlName,ChildCheckBoxName)
    { 
        var chkbox;
        //The value of i is provided according to childCheckBox control id
        //Please run the project and see the SOURCE FILE
        //For my project it is as below
        //<input id="GridView1_ctl02_chbxChild" type="checkbox" 
        //name="GridView1$ctl02$chbxChild" />
        var i=2;
        var c=2;	//The value of c is the same as that of i.
		//It is keeping track of the checked checkbox.
        var u=2;	//The value of u is the same as that of i.
		//It is keeping track of the unchecked checkbox.
        chkbox = document.getElementById(DataControlName + 
			'_ctl0' + i + '_' + ChildCheckBoxName);
        while(chkbox!=null)
        { 
            if(chkbox.checked==true)
                c=c+1;
            else
                u=u+1;
            i=i+1;
            chkbox = document.getElementById(DataControlName + 
			'_ctl0' + i + '_' + ChildCheckBoxName);
        }
        chkbox=document.getElementById("GridView1_ctl01_chbxHeader");
        if(i==c)
        {
            chkbox.checked = true;
        }
        if(i==u)
        {
            chkbox.checked = false;
        }
        if(i!=c)
            chkbox.checked = false;
}
    //This function selects all the ChildCheckBox if HeaderCheckBox is selected
    //and deselects all the ChildCheckBox if HeaderCheckBox is deselected
    function SelectOrUnselectAll_DC_CheckBox(DataControlName,obj,ChildCheckBoxName)
    { 
    //this function decides whether to check or uncheck all
        if(obj.checked==true) 
        {
            //Call subFunction for Select All ChildCheckBoxes
            SelectAll_DC_CheckBox(DataControlName,ChildCheckBoxName);
        }
        else 
        {
            //Call subFunction for DeSelect All ChildCheckBoxes
            UnselectAll_DC_CheckBox(DataControlName,ChildCheckBoxName);
        }
    } 
    //Function to check all CheckBoxes 
    function SelectAll_DC_CheckBox(DataControlName,objid)
    { 
        var chkbox; 
        var i=2; 

        chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); 
        while(chkbox!=null)
        { 
            chkbox.checked=true; 
            i=i+1; 
            chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); 
        } 

    }
    //Function to UnCheck all CheckBoxes
    function UnselectAll_DC_CheckBox(DataControlName,objid)
    { 
        var chkbox; 
        var i=2; 

        chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); 

        while(chkbox!=null)
        { 
            chkbox.checked=false; 
            i=i+1; 
            chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); 
        } 
    }

How To Call These Functions?

If the CheckBox is placed in <HeaderTemplate>, we call the function as follows:

onclick="SelectOrUnselectAll_DC_CheckBox('GridView1',this,'chbxChild')" 

If the CheckBox is placed in <itemtemplate>, we call the function as follows:

onclick="check('GridView1','chbxChild')" 

History

  • 26th January, 2009: Initial post

License

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

About the Author

Kundan_Kumar
Software Developer Confidential
India India
No Biography provided

Comments and Discussions

 
GeneralMy vote of 1 Pinmemberdavefrey1214-Oct-10 5:08 
GeneralSolved - [ Problem when used With ASP.NET USER CONTROL ] Pinmemberhasmukh waiting for sum114-Jul-10 22:20 
GeneralRe: Solved - [ Problem when used With ASP.NET USER CONTROL ] PinmemberKundan_Kumar15-Jul-10 0:40 
QuestionProblem when used With ASP.NET USER CONTROL Pinmemberhasmukh waiting for sum114-Jul-10 22:03 
Question[My vote of 2] not complete Pinmembers0acharya1-Sep-09 3:35 
AnswerRe: [My vote of 2] not complete Pinmemberhasmukh waiting for sum115-Jul-10 1:43 
GeneralMy vote of 1 PinmemberCPAV27-Jan-09 7:48 
GeneralRe: My vote of 1 PinmemberKundan_Kumar30-Jan-09 0: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
Web04 | 2.8.140721.1 | Last Updated 26 Jan 2009
Article Copyright 2009 by Kundan_Kumar
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid