Check, Uncheck the CheckBoxes of DataGrid using JavaScript

Kundan_Kumar

Rate me:

2.00/5 (4 votes)

26 Jan 2009CPOL

37.5K

The code handles any DataControl's CheckBoxes Check, Uncheck on Client Side

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.

JavaScript

    //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:

JavaScript

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

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

JavaScript

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

History

26^th January, 2009: Initial post

License

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

Written By

Kundan_Kumar

Software Developer Confidential

India

This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

-------------------------------------------------------- <script language="javascript" type="text/javascript"> //This function check the HeaderCheckBox if all the ChildCheckBox is Selected //and deselect the HeaderCheckBox if even a single ChildCheckBox is DeSelected. //http://www.codeproject.com/KB/grid/CheckBoxesJavaScript.aspx?msg=3535403#xx3535403xx function check(DataControlName,ChildCheckBoxName,HeaderCheckBox) { var chkbox; //The value of i is provided according to childCheckBox control id //For it 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 same that of i.It is of keeping track of checked checkbox. var u=2;//The value of u is same that of i.It is of keeping track of 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_chbxHeader1"); chkbox=document.getElementById(DataControlName + '_ctl0' + 1 + '_' + HeaderCheckBox); if(i==c) { chkbox.checked = true; } if(i==u) { chkbox.checked = false; } if(i!=c) chkbox.checked = false; } //This function select all the ChildCheckBox if HeaderCheckBox is selected //and deselect 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 SelectAll_DC_CheckBox(DataControlName,objid) { //.this function is to check all the items var chkbox; var i=2; chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); while(chkbox!=null) { chkbox.checked=true; i=i+1; if (i >= 10) { chkbox=document.getElementById(DataControlName + '_ctl' + i + '_' + objid); } else { chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); } } }//-------------- function UnselectAll_DC_CheckBox(DataControlName,objid) { //.this function is to uncheckcheck all the items 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); if (i >= 10) { chkbox=document.getElementById(DataControlName + '_ctl' + i + '_' + objid); } else { chkbox=document.getElementById(DataControlName + '_ctl0' + i + '_' + objid); } } } </script> --------------------------------------------------------

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

Check, Uncheck the CheckBoxes of DataGrid using JavaScript

Introduction

Background

Using the Code

How To Call These Functions?

History

License

Comments and Discussions