Member Avatar for 54uydf

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
  • 196 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by 54uydf

Recommended Answers

All 2 Replies

Member Avatar for stbuchok

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>
Member Avatar for 54uydf

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 because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.