Check, Uncheck the CheckBoxes of DataGrid using JavaScript

• Download source - 4 KB

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

• 26^th January, 2009: Initial post