Check, Uncheck the CheckBoxes of DataGrid using JavaScript





2.00/5 (4 votes)
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