check all checkbox

**reguapo** · 09-08-2006, 07:19 PM

i am working in aspnet and i have a gridview, after all aspnet render it as a table, a i wanna to have a select all checkbox, when i check it then check all the checkboxes in the column, and when i uncheck a least one , uncheck the check all checkbox, and when i check the last checkbox unchecked, check the check all checkbox.

i´ll really appreciate some help.

excuse me for my english.

**jscheuer1** · 09-09-2006, 05:46 PM

Here's a demo:

http://home.comcast.net/~jscheuer1/side/table_check.htm

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Table Check</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#t1, #t2 {
width:250px;
float:left;
margin-right:1em;
}
#t2 {
width:400px;
}
.all input, .all span {
display:none;
}
#t1 th, #t1 td, #t2 th, #t2 td {
padding:3px 5px 3px 3px;
}
.clear {
clear:left;
}
</style>
<script type="text/javascript">

/*Check/Uncheck columns script © John Davenport Scheuer
 *visit: http://www.dynamicdrive.com/forums
 *username: jscheuer1
 *This notice must remain for legal use  */

//set 'check all' label
var allp='Check All'

//Multiple tables, each w/unique id? (use 1 for yes, 0 for no)
var tids=1

//Initialize 'check all' cells display? (use 1 for yes, 0 for no)
var initca=1

/////////////////Stop Editing////////////
allp=new RegExp(allp);

function findRow(box){
var tr=box.parentNode;
while (tr.parentNode&&!/^tr$/i.test(tr.tagName))
tr=tr.parentNode;
return /^tr$/i.test(tr.tagName)? tr : null;
}

function findCell(box){
var td=box.parentNode;
while (td.parentNode&&!/^th$|^td$/i.test(td.tagName))
td=td.parentNode;
return /^th$|^td$/i.test(td.tagName)? td : null;
}

function findCol(box){
var tr=findRow(box);
for (var i_tem = 0; i_tem < tr.cells.length; i_tem++)
if (tr.cells[i_tem]==findCell(box))
return tids? tr.parentNode.parentNode.id+i_tem : i_tem;
}
var boxes=[]
function initcheckAll(){
var c=0, inp=document.getElementsByTagName('input');
for (var i_tem = 0; i_tem < inp.length; i_tem++)
if (inp[i_tem].type.toLowerCase()=='checkbox'&&findCell(inp[i_tem])){
boxes[c++]=[inp[i_tem], findCell(inp[i_tem])];
boxes[c-1][0].col=findCol(boxes[c-1][0])
}
for (i_tem = 0; i_tem < boxes.length; i_tem++)
if (allp.test(boxes[i_tem][1].innerHTML)){
for (var i = 0; i < boxes[i_tem][1].childNodes.length; i++)
if(initca&&boxes[i_tem][1].childNodes[i].tagName&&/^div$/i.test(boxes[i_tem][1].childNodes[i].tagName))
boxes[i_tem][1].childNodes[i].style.display='none';
else if(initca&&boxes[i_tem][1].childNodes[i].tagName)
boxes[i_tem][1].childNodes[i].style.display='inline';
boxes[i_tem][0].onclick=function(){
for (var i_tem = 0; i_tem < boxes.length; i_tem++)
if(this.checked&&boxes[i_tem][0].col==this.col)
boxes[i_tem][0].checked=1;
else if (boxes[i_tem][0].col==this.col)
boxes[i_tem][0].checked=0;
};
}
else
boxes[i_tem][0].onclick=function(){
if(!this.checked){
for (var i_tem = 0; i_tem < boxes.length; i_tem++)
if(boxes[i_tem][0].col==this.col){
boxes[i_tem][0].checked=0;
return;
}
}
else{
var b=[];
for (var i_tem = 0; i_tem < boxes.length; i_tem++)
if(boxes[i_tem][0].col==this.col)
b[b.length]=boxes[i_tem][0];
if (!b[0].checked)
for (i_tem = 1; i_tem < b.length; i_tem++)
if(!b[i_tem].checked)
return;
b[0].checked=1;
}
};
}
onload=initcheckAll;
</script>
</head>
<body>
<table id="t1" border="1">
<tr>
    <th colspan="2">Table One</th>
</tr>
<tr class="all">
<td><div>Col #1 </div><input type="checkbox"><span> Check All</span></td><td><div>Col #2 </div><input type="checkbox"><span> Check All</span></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
</table>
<table id="t2" border="1">
<tr>
    <th colspan="4">Table Two</th>
</tr>
<tr class="all">
<td><div>Col #1 </div><input type="checkbox"><span> Check All</span></td><td><div>Col #2 </div><input type="checkbox"><span> Check All</span></td>
<td><div>Col #3 </div><input type="checkbox"><span> Check All</span></td><td><div>Col #4 </div><input type="checkbox"><span> Check All</span></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
<td><input type="checkbox"></td><td><input type="checkbox"></td>
</tr>
</table>
<div class="clear"></div>
</body>
</html>

Notes on Configuration -

Set this variable to a unique text string that appears in all table cells that contain a master toggle checkbox (case sensitive):

Code:

//set 'check all' label
var allp='Check All'

Set this variable to 1 if you have more than one table on the page that will be using the script. Otherwise use 0. If Using with more than one table, each table that will use the script must have a unique id.

Code:

//Multiple tables, each w/unique id? (use 1 for yes, 0 for no)
var tids=1

Set this variable to 1 to show no master toggle checkbox if javascript is disabled. Otherwise use 0. If using this option set to 1, the cell containing the master toggle checkbox must follow general guidelines and certain styles must be set for its elements:

Code:

//Initialize 'check all' cells display? (use 1 for yes, 0 for no)
var initca=1

Guidelines for using the above option: The cell containing the master toggle checkbox will contain a checkbox, a span and a division (in any order). The span will contain text that will only be displayed if javascript is enabled. The division will contain text that will only be displayed if javascript is disabled, example:

Code:

<td><div>Col #1 </div><input type="checkbox"><span> Check All</span></td>

In the above the red element will be displayed if there is no javascript, otherwise the green ones and the blue text will be displayed. In the above example, the blue text is also our 'check all' label, the allp variable. Now, for this to work, the javascript visible elements must have their display initially set to none somehow. This can be done with inline style or in the stylesheet. I used the stylesheet, selecting on a class name for the row containing these 'masters':

the style:

Code:

.all input, .all span {
display:none;
}

the markup:

HTML Code:

<tr class="all">
<td><div>Col #1 </div><input type="checkbox"><span> Check All</span></td><td><div>Col #2 </div><input type="checkbox"><span> Check All</span></td>
</tr>

**mburt** · 09-09-2006, 07:26 PM

Awesome John. That's a really useful script...

**jscheuer1** · 09-10-2006, 04:59 AM

Originally Posted by mburt

Awesome John. That's a really useful script... :p

Thanks mburt, I hope the OP likes it.

**Mavspeed** · 07-24-2012, 08:17 AM

Hi John,
I've found your script very useful in general.
I've a problem on my page, I've 14 columns and in 3 of them there are checkboxes i.e. in column 10,11 and 14. Your script has finally done what I was looking for in checking, unchecking all boxes in single column but right now I've lost chance to eneble/disable fileds in a single row which I had before under checkboxes in column 14.
Can you please help me to achive this?

**jscheuer1** · 07-25-2012, 12:23 AM

Please start a new thread for a new question and include your code, or better yet a link to your page. You may refer back to this thread if you like.

Thread: check all checkbox

Thread Tools

Search Thread

check all checkbox

Bookmarks

Bookmarks

Posting Permissions