Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    select boxes in a grid

    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?

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    Like this?

    Code:
    <!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>

  • #3
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Perfect Spudhead!!!! thanks!

  • #4
    New to the CF scene
    Join Date
    Dec 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I would replace checkboxes with images how could be it possible???


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •