Check all boxes :: JS howto?

Need to select all checkboxes?

[Nick_W]

Hi all,

Could someone please show me how to do a 'select all' javascript thing? Here's the example:

<form method="post" action="script.php">
 <input type="checkbox" name="test" value="select_all" />Select All
 <input type="checkbox" name="test" value="1" />Choose 1
 <input type="checkbox" name="test" value="2" />Choose 2
 <input type="checkbox" name="test" value="3" />Choose 3
</form>

Many thanks,

Nick

[rewboss]

What you need to do is to recall the following facts:

1. The checkboxes will all be available in an array (document.forms[0].test, to be precise).
2. Each individual checkbox has a checked property.

The "Select All" box needs an onlick handler:

<input type="checkbox" name="test" value="select_all" onclick="selectAll(this.form.test);" />

the function selectAll() will need to cycle through each element of the array, setting the checked property of each appropriately:

function selectAll(t){
 for(i=1; i<t.length; i++) t[i].checked=t[0].checked;
}

Notice how it sets each checked property to the value of the checked property of the "Select All" box? This means that it works both ways: it selects all when you put a checkmark in, and deselects all when you remove the checkmark.

[Nick_W]

Great, thanks very much reboss,

I've got it up and running, very nice indeed!

Goddamit, I have got to find time to start reading this O'Reilly I've been threatning to begin for so long ;)

Nick

[Nick_W]

Hmmm... Hit a snag,

I have to have <input>'s like this for my php to go the way I want:

<input type="checkbox" name="test" value="emails[$key]" />

$key -> is an email address, different one per generated <input>.

This mucks up the JS, any ideas?

Cheers

Nick

[rewboss]

Ah. Now, for PHP to work, you need name="test[]" which I think is much more likely to mess up the JavaScript.

For the value attribute, I'm not sure that the JavaScript cares.

Exactly what errors are you getting?

[Nick_W]

well, when I do 'name="test[$key]" the JS does not work.

I've come up with a solution, though I don't think it would work if I had multiple checkbox groups as it would check all of them...

I just dropped the name of the checkboxes from the onclick like this:

onclick="selectAll(this.form)"

Works fine, but limited I suspect...

Nick

[rewboss]

I puzzled for a second or two about how you can leave out the name from the event handler, and I think I've got it.

The name attribute should be name="test[]" -- that is, there should be nothing inside the brackets.

Remember that checkboxes with the same name are all put into an array. What you've done is given each checkbox a different name. Instead of each checkbox being an element of array test[] they are now separate checkboxes, unconnected from each other:

name="test[[e-mail]]"
name="test[[e-mail]]"

...and so on.

Obviously, your browser is allowing you to access each checkbox as if it were an element of the Form object -- I'm not sure if it's supposed to, so it might not work on all browsers.

What this means is that if you have other single checkboxes floating around, the script -- as you have amended it -- will go through and check/uncheck all those, too, and that might not be what you want. In fact, the script is going through all the Form elements and setting the checked property of each to true (this will, luckily, only have an effect with checkboxes).

Try the following changes:

Change the name attribute on all the checkboxes to "test[]"
Change the onclick handler to "selectAll(this.form.test[]);"
If that causes problems, try changing the onclick handler to "selectAll(this.form['test[]']);"

[Nick_W]

No, neither will work ;(

Here's the relevant code, though I can't see much being done about it...

/* generate form */
$text=<<<EOF
<form method="post" 
action="mailit.php">
<table id="studentsTable">
 <caption>Select students to email to</caption>
 <tr>
  <th class="select">Select</th>
  <th>Name</th>
 </tr>
 <tr>
  <td class="select"><input type="checkbox" name="emails" 
  value="" class="checkbox" 
  onclick="selectAll(this.form);"/></td>
  <td class="bold">Email all students</td>
 </tr>
EOF;
foreach(sort_students() as $key => $val) {
  $text.=<<<EOF
 <tr>
  <td class="select"><input type="checkbox" class="checkbox" 
  name="emails[$key]" 
  value="$key" /></td>
  <td>$val</td>
 </tr>
EOF;
}
$text.=<<<EOF
</table>

Thanks for the help rewboss, don't feel obliged to pursue this, I'm sure you have other stuff to do ;)

Nick

[DrDoc]

Well, if you didn't have the $key value in the name it would be very easy.

All you'd have to do is change the select all checkbox to this:

<input type="checkbox" name="test[]" value="select_all" onclick="selectAll(this.form['emails\[\]']);" />

Note that the brackets need to be escaped since they actually are used for other purposes normally. If you still need the $key value in the name, it gets a whole lot more complicated.

[DrDoc]

Thought #2:

document.forms[0] is an array as well, comtaining all the elements in the form. What you could do is something like this:

<html>
<head>
<title>Untitled</title>
<script language="JavaScript" type="text/javascript">
function selectAll(){
t=document.forms[0].length;
for(i=1; i<t; i++) document.forms[0][i].checked=document.forms[0][0].checked;
}
</script>
</head>
<body>
<form method="post" action="script.php">
<input type="checkbox" name="test[]" value="select_all" onclick="selectAll();" />
<input type="checkbox" name="test[a]" value="1" />Choose 1
<input type="checkbox" name="test[b]" value="2" />Choose 2
<input type="checkbox" name="test[c]" value="3" />Choose 3
</form>
</body>
</html>

Now, say that you have a submit button or anything else after the checkboxes .. Well, simply don't try to check the last object then.

function selectAll(){
t=document.forms[0].length;
for(i=1; i<t-1; i++) document.forms[0][i].checked=document.forms[0][0].checked;
}

[Nick_W]

Wahooooy!

Thought #2 works like a charm ;););)

Thanks very much guys, much appreciated....

Nick

[Brett_Tabke]

Ummm, ever look at the stickymail "check all" option? Same thing - works pretty good.

[moonbiter]

You could also do something similar to #2 like this in DOM browsers:

function selectAll(obj) {
var checkBoxes = document.getElementsByTagName('input');
for (i = 0; i < checkBoxes.length; i++) {
if (obj.checked == true) {
checkBoxes[i].checked = true; // this checks all the boxes
} else {
checkBoxes[i].checked = false; // this unchecks all the boxes
}
}
}

and call it like this:

selectAll(this);