check/uncheck all

Question

54uydf 1 Junior Poster

13 Years Ago

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>

javascript

2 Contributors
2 Replies
197 Views
6 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by 54uydf

stbuchok

13 Years Ago

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>

Reply to this topic

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.

54uydf 1 Junior Poster · Answer 1 · 2011-08-25T17:58:06+00:00

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 :)