...

View Full Version : select boxes in a grid



lithos
12-13-2004, 04:01 PM
I have a grid like this where the 'x' are checkboxes

1 2 3 4
1 x x x x
2 x x x x
3 x x x x
4 x x x x

clicking on the number on the top or on the left will select all checkboxes in that the column or respectively of that row.

How can I do that? Any other suggestion to doing this task?

Spudhead
12-13-2004, 04:28 PM
Like this?



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>

<script language="JavaScript" type="text/javascript">
function toggleRow(whichRow, turnOn){
for(i=1;i<=4;i++){
var checkBoxID = "c"+whichRow+"_"+i;
if (turnOn==true){
document.getElementById(checkBoxID).checked = true;
}else{
document.getElementById(checkBoxID).checked = false;
}
}
}

function toggleCol(whichCol, turnOn){
for(i=1;i<=4;i++){
var checkBoxID = "c"+i+"_"+whichCol;
if (turnOn==true){
document.getElementById(checkBoxID).checked = true;
}else{
document.getElementById(checkBoxID).checked = false;
}
}
}

function clearAll(){
toggleCol('1',false);
toggleCol('2',false);
toggleCol('3',false);
toggleCol('4',false);
toggleRow('1',false);
toggleRow('2',false);
toggleRow('3',false);
toggleRow('4',false);
}
</script>


</head>

<body>

<table cellpadding=5 cellspacing=0 border=0>
<tr>
<td>&nbsp;</td>
<td><a href="javascript:toggleCol('1',true);">1</a></td>
<td><a href="javascript:toggleCol('2',true);">2</a></td>
<td><a href="javascript:toggleCol('3',true);">3</a></td>
<td><a href="javascript:toggleCol('4',true);">4</a></td>
</tr>
<tr>
<td><a href="javascript:toggleRow('1',true);">1</a></td>
<td><input type="checkbox" name="c1_1" id="c1_1"></td>
<td><input type="checkbox" name="c1_2" id="c1_2"></td>
<td><input type="checkbox" name="c1_3" id="c1_3"></td>
<td><input type="checkbox" name="c1_4" id="c1_4"></td>
</tr>
<tr>
<td><a href="javascript:toggleRow('2',true);">2</a></td>
<td><input type="checkbox" name="c2_1" id="c2_1"></td>
<td><input type="checkbox" name="c2_2" id="c2_2"></td>
<td><input type="checkbox" name="c2_3" id="c2_3"></td>
<td><input type="checkbox" name="c2_4" id="c2_4"></td>
</tr>
<tr>
<td><a href="javascript:toggleRow('3',true);">3</a></td>
<td><input type="checkbox" name="c3_1" id="c3_1"></td>
<td><input type="checkbox" name="c3_2" id="c3_2"></td>
<td><input type="checkbox" name="c3_3" id="c3_3"></td>
<td><input type="checkbox" name="c3_4" id="c3_4"></td>
</tr>
<tr>
<td><a href="javascript:toggleRow('4',true);">4</a></td>
<td><input type="checkbox" name="c4_1" id="c4_1"></td>
<td><input type="checkbox" name="c4_2" id="c4_2"></td>
<td><input type="checkbox" name="c4_3" id="c4_3"></td>
<td><input type="checkbox" name="c4_4" id="c4_4"></td>
</tr>
</table>

<br/>

<a href="javascript:clearAll();">uncheck all</a>

</body>
</html>

lithos
12-13-2004, 04:57 PM
Perfect Spudhead!!!! thanks!

lithos
12-15-2004, 05:15 PM
If I would replace checkboxes with images how could be it possible???



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum