0

Hi, I've got a table with 3 cols and each cell has a checkbox. I want to have 3 checkboxes above the table that each one checks/unchecks all the checkboxes in the table but ONLY in one col. so if I click checkbox 1 all the checkboxes in col 1 are checked, if I click checkbox 2 all the checkboxes in col 2 are checked, etc..

I found this code that checks all the checkboxes in 1 <form>, using the form's ID attribute.
but my table is in 1 form, I can't separate it into 3 forms and I can't give the checkboxes in the table different ID or NAME...

I tried to give the table's <td> different ID and using it in the JS function instead of the <form>'s ID but it doesn't work...

here's the code-

<script language='JavaScript'>
      checked = false;
      function checkedAll () {
        if (checked == false){checked = true}else{checked = false}
	for (var i = 0; i < document.getElementById('myform').elements.length; i++) {
	  document.getElementById('myform').elements[i].checked = checked;
	}
      }
    </script>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="myform">
   
    Check col1: <input type='checkbox' name='checkall' onclick='checkedAll();'>
   <!-- Check col2: <input type='checkbox' name='checkall' onclick='checkedAll();'>
    Check col3: <input type='checkbox' name='checkall' onclick='checkedAll();'>-->

<table width=100%>	
  <tr class=trHead>
	<td>  1</td>
	<td>  2</td>
	<td>  3</td>
  </tr>
//start of a loop
  <tr>
     <td><input type="checkbox" name="checkbox[]" id="checkbox[]"  value="dfg"/>dfg</td>
     <td><input type="checkbox" name="checkbox[]" id="checkbox[]"  value="dfg"/>df</td>
     <td><input type="checkbox" name="checkbox[]" id="checkbox[]"  value="sd"/>sd</td>
  </tr>
//end of a loop
</table>
</form>
2
Contributors
2
Replies
3
Views
5 Years
Discussion Span
Last Post by 54uydf
1

First, get rid of the [] in the name and id, they are pointless and can confuse people into thinking they are an array when they are not.

Secondly, I'd use jQuery for this as it would make it a lot easier to accomplish what you want.

Here is a complete example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Fun Little Widget</title>

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script>

$(function(){
	$('#firstRowCheckAll').click(function(){
		if($(this).is(':checked')){
			$('[data-column="1"]').attr('checked', 'checked');
		}
		else{
			$('[data-column="1"]').removeAttr('checked');
		}
	});

	$('#secondRowCheckAll').click(function(){
			if($(this).is(':checked')){
				$('[data-column="2"]').attr('checked', 'checked');
			}
			else{
				$('[data-column="2"]').removeAttr('checked');
			}
	});

	$('#thirdRowCheckAll').click(function(){
			if($(this).is(':checked')){
				$('[data-column="3"]').attr('checked', 'checked');
			}
			else{
				$('[data-column="3"]').removeAttr('checked');
			}
	});
});

</script>

</head>
<body>

<table>
	<tr>
		<td>
		Check all:<input id="firstRowCheckAll" type="checkbox" />
		</td>
		<td>
		Check all:<input id="secondRowCheckAll" type="checkbox" />
		</td>
		<td>
		Check all:<input id="thirdRowCheckAll" type="checkbox" />
		</td>
	</tr>
	<tr>
		<td>
		<input data-column="1" type="checkbox" />
		</td>
		<td>
		<input data-column="2" type="checkbox" />
		</td>
		<td>
		<input data-column="3" type="checkbox" />
		</td>
	</tr>
	<tr>
		<td>
		<input data-column="1" type="checkbox" />
		</td>
		<td>
		<input data-column="2" type="checkbox" />
		</td>
		<td>
		<input data-column="3" type="checkbox" />
		</td>
	</tr>
	<tr>
		<td>
		<input data-column="1" type="checkbox" />
		</td>
		<td>
		<input data-column="2" type="checkbox" />
		</td>
		<td>
		<input data-column="3" type="checkbox" />
		</td>
	</tr>
	<tr>
		<td>
		<input data-column="1" type="checkbox" />
		</td>
		<td>
		<input data-column="2" type="checkbox" />
		</td>
		<td>
		<input data-column="3" type="checkbox" />
		</td>
	</tr>
	<tr>
		<td>
		<input data-column="1" type="checkbox" />
		</td>
		<td>
		<input data-column="2" type="checkbox" />
		</td>
		<td>
		<input data-column="3" type="checkbox" />
		</td>
	</tr>
</table>

</body>
</html>
0

I don't think I'll get rid of the [] I'm using it for other stuff that took me forever to make work, and [] is part of the trick...why? I have no idea..I DON'T understand the checkboxes in PHP and avoid using them whenever possible!
I hope ur code will work with the []...I'll check it out now, thank you anyways :)

Edited by 54uydf: n/a

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.