how to checked all the cheboxes in grideview using javascrip

JAVASCRIPT CODE

===============

window.onload = function()

{

//Get total no. of CheckBoxes in side the GridView.

TotalChkBx = parseInt('<%= this.grdEmployeeDetails.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.grdEmployeeDetails.ClientID %>');

var TargetChildControl = "chkChild";

//Get all the control of the type INPUT in the base control.

var Inputs = TargetBaseControl.getElementsByTagName("input");

//Checked/Unchecked all the checkBoxes inside 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, chkMaster)

{

//get target control.

var HeaderCheckBox = document.getElementById(chkMaster);

//Modifiy Counter;

if(CheckBox.checked && Counter < TotalChkBx)

Counter++;

else if(Counter > 0)

Counter--;

//Change state of the header CheckBox.

if(Counter < TotalChkBx)

HeaderCheckBox.checked = false;

else if(Counter == TotalChkBx)

HeaderCheckBox.checked = true;

}

ASPX PAGE : INSIDE GRIDVIEW

=======================

OnCheckedChanged="chkMaster_CheckedChanged" AutoPostBack="true" />

AutoPostBack="true" />

CODE BEHIND PAGE

===============

protected void grdEmployeeDetails_RowCreated(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow &&

(e.Row.RowState == DataControlRowState.Normal ||

e.Row.RowState == DataControlRowState.Alternate))

{

CheckBox chkChild = (CheckBox)e.Row.Cells[1].FindControl("chkChild");

CheckBox chkMaster = (CheckBox)this.grdEmployeeDetails.HeaderRow.FindControl("chkMaster");

chkChild.Attributes["onclick"] = string.Format("javascript:ChildClick(this,'{0}');", chkMaster.ClientID);

}

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Saptarshi Ghosh13y ago
JAVASCRIPT CODE
===============
window.onload = function()
{
//Get total no. of CheckBoxes in side the GridView.
TotalChkBx = parseInt('<%= this.grdEmployeeDetails.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.grdEmployeeDetails.ClientID %>');
var TargetChildControl = "chkChild";

//Get all the control of the type INPUT in the base control.
var Inputs = TargetBaseControl.getElementsByTagName("input");

//Checked/Unchecked all the checkBoxes inside 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, chkMaster)
{
//get target control.
var HeaderCheckBox = document.getElementById(chkMaster);

//Modifiy Counter;
if(CheckBox.checked && Counter < TotalChkBx)
Counter++;
else if(Counter > 0)
Counter--;

//Change state of the header CheckBox.
if(Counter < TotalChkBx)
HeaderCheckBox.checked = false;
else if(Counter == TotalChkBx)
HeaderCheckBox.checked = true;
}

ASPX PAGE : INSIDE GRIDVIEW
=======================

OnCheckedChanged="chkMaster_CheckedChanged" AutoPostBack="true" />

AutoPostBack="true" />

CODE BEHIND PAGE
===============
protected void grdEmployeeDetails_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow &&
(e.Row.RowState == DataControlRowState.Normal ||
e.Row.RowState == DataControlRowState.Alternate))
{
CheckBox chkChild = (CheckBox)e.Row.Cells[1].FindControl("chkChild");
CheckBox chkMaster = (CheckBox)this.grdEmployeeDetails.HeaderRow.FindControl("chkMaster");
chkChild.Attributes["onclick"] = string.Format("javascript:ChildClick(this,'{0}');", chkMaster.ClientID);
}
}
Satyapriya Nayak13y ago
http://www.c-sharpcorner.com/uploadfile/vipinakhil/checkun-check-checkboxes-items-in-Asp-Net-datagrid-using-javascript/default.aspx