homepage Welcome to WebmasterWorld Guest from 54.227.67.210
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Check all boxes :: JS howto?
Need to select all checkboxes?
Nick_W




msg:1483581
 7:46 pm on Aug 19, 2002 (gmt 0)

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




msg:1483582
 8:11 pm on Aug 19, 2002 (gmt 0)

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




msg:1483583
 8:30 pm on Aug 19, 2002 (gmt 0)

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




msg:1483584
 9:34 pm on Aug 19, 2002 (gmt 0)

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




msg:1483585
 5:29 am on Aug 20, 2002 (gmt 0)

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




msg:1483586
 5:53 am on Aug 20, 2002 (gmt 0)

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




msg:1483587
 6:12 am on Aug 20, 2002 (gmt 0)

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[abc@example.com]"
name="test[xyz@example.org]"

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




msg:1483588
 6:35 am on Aug 20, 2002 (gmt 0)

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




msg:1483589
 7:35 am on Aug 20, 2002 (gmt 0)

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




msg:1483590
 7:42 am on Aug 20, 2002 (gmt 0)

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




msg:1483591
 4:38 pm on Aug 20, 2002 (gmt 0)

Wahooooy!

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

Thanks very much guys, much appreciated....

Nick

Brett_Tabke




msg:1483592
 4:49 pm on Aug 20, 2002 (gmt 0)

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

moonbiter




msg:1483593
 4:50 pm on Aug 20, 2002 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved