I'm pulling my hair out trying to find a checkbox check-all toggle script that will pass an array of selected to my server side PHP script. I really want a master checkbox that serves as a select-all/deselect-all control.

I've looked at countless examples online, and the closest I can find is one below that doesn't seem to submit anything very useful, the posted data is:

Array ( [all] => on [checkGroup] => fourth [Submit] => Submit )

which doesn't seem very useful when I want to process the results on the server side. I was expecting an array that I could use to build an SQL query.

<script type="text/javascript">
function checkAll(checkname, exby) {
for (i = 0; i < checkname.length; i++)
  checkname[i].checked = exby.checked? true:false
}
</script>

<form name="form2" method="post" action="?action=evaluate"> 
  <input type="checkbox" name="all" onClick="checkAll(document.form2.checkGroup,this)">Check/Uncheck All<br>
  <input type="checkbox" name="checkGroup" value ="first">First<br>
  <input type="checkbox" name="checkGroup" value ="second">Second<br>
  <input type="checkbox" name="checkGroup" value ="third">Third<br>
  <input type="checkbox" name="checkGroup" value ="fourth">Fourth<br>
<input type="submit" name="Submit" value="Submit" style="height:23px;font-weight:bold;padding-top:0px;">

</form>

Can anyone help me find a suitable script, or help me modify this one?

Recommended Answers

All 3 Replies

Your code works. Only you need to use "checked" as a value for the attribute "checked", as this is the only valid value.

<script type="text/javascript">
function checkAll(checkname, exby) {
for (i = 0; i < checkname.length; i++)
  checkname[i].checked = exby.checked ? "checked" : "";
}
</script>

<form name="form2" method="post" action="?action=evaluate"> 
  <input type="checkbox" name="all" onClick="checkAll(document.form2.checkGroup,this)">Check/Uncheck All<br>
  <input type="checkbox" name="checkGroup" value ="first">First<br>
  <input type="checkbox" name="checkGroup" value ="second">Second<br>
  <input type="checkbox" name="checkGroup" value ="third">Third<br>
  <input type="checkbox" name="checkGroup" value ="fourth">Fourth<br>
<input type="submit" name="Submit" value="Submit" style="height:23px;font-weight:bold;padding-top:0px;">
</form>

But your code works also without this small modification. If not, update your browser, it works in FF and IE.

~G

Thanks, Graphix.

For whatever reason, it wasn't working for me in IE7 or FF 3.6.3.

What I was told was that checkGroup needed to be an array for an array to be passed, thus 'checkGgroup[]' rather than 'checkGgroup'.

I will post below the full code of my working solution.

Thank you for replying, all feedback is good.

Your code works. Only you need to use "checked" as a value for the attribute "checked", as this is the only valid value.

<script type="text/javascript">
function checkAll(checkname, exby) {
for (i = 0; i < checkname.length; i++)
  checkname[i].checked = exby.checked ? "checked" : "";
}
</script>

<form name="form2" method="post" action="?action=evaluate"> 
  <input type="checkbox" name="all" onClick="checkAll(document.form2.checkGroup,this)">Check/Uncheck All<br>
  <input type="checkbox" name="checkGroup" value ="first">First<br>
  <input type="checkbox" name="checkGroup" value ="second">Second<br>
  <input type="checkbox" name="checkGroup" value ="third">Third<br>
  <input type="checkbox" name="checkGroup" value ="fourth">Fourth<br>
<input type="submit" name="Submit" value="Submit" style="height:23px;font-weight:bold;padding-top:0px;">
</form>

But your code works also without this small modification. If not, update your browser, it works in FF and IE.

~G

My eventual full working solution:

<?php 

$pagetitle = "Checkbox List Test";

// open page structure
include("includes/standard-doc-head.inc.php"); 


if (isset($_GET['action'])) {
	switch (strtolower($_REQUEST['action'])) {
		case evaluate:
			evaluateForm();  
			break;
		default;
			showForm();  
			break;
	} 
} else {
	showForm();  
} // end if (isset($_GET['action']))


function showForm() {
	?>
	<h3>Test Checkbox List</h3>
	
		
	<hr /><h4>Form 1</h4>
		
	<script type="text/javascript">
	function checkAll(checkname, exby) {
	var action = (exby.checked)? true : false;
	var checkname = exby.form.elements[checkname];
	for (i = 0; i < checkname.length; i++) {
		 checkname[i].checked = action; 
		 }
	}
	</script>

	<form name="form1" method="post" action="?action=evaluate"> 
		<input type="checkbox" name="all" onclick="checkAll('checkGroup[]', this)">Check/Uncheck All<br />
		<input type="checkbox" name="checkGroup[]" value ="value_first">First<br />
		<input type="checkbox" name="checkGroup[]" value ="value_second">Second<br />
		<input type="checkbox" name="checkGroup[]" value ="value_third">Third<br />
		<input type="checkbox" name="checkGroup[]" value ="value_fourth">Fourth<br />
		<input type="submit" name="Submit" value="Submit" style="height:23px;font-weight:bold;padding-top:0px;">
	</form>

	<?php
} // end showForm()


function evaluateForm() {

#	print_r($_POST); // debug value

	echo "<p>Checked Values:</p>";
	$group=$_POST['checkGroup'];
	foreach ($group as $value) {
		echo "$value<br />";
	}
	
} // end evaluateForm()


// close page structure
include("includes/standard-doc-foot.inc.php");

?>
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.