lithos
12-13-2004, 03: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, 03: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> </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, 03:57 PM
Perfect Spudhead!!!! thanks!
lithos
12-15-2004, 04:15 PM
If I would replace checkboxes with images how could be it possible???