Syntax for JS to select all checkboxes

I am just trying to add a select all checkbox to a form.

I have the example code:

function selectAll(source) {
checkboxes = document.getElementsByName('colors[]');
	for(var i in checkboxes)
		checkboxes[i].checked = source.checked;
}

And

<input type="checkbox" id="selectall" onClick="selectAll(this)" />Select All
<input type="checkbox" name="colors[]" value="red" />Red<br>
<input type="checkbox" name="colors[]" value="blue" />Blue<br>
<input type="checkbox" name="colors[]" value="green" />Green<br>
<input type="checkbox" name="colors[]" value="black" />Black

Which works correctly.

However, I am using a PHP loop to display the checkboxes, so the name looks like:

name=\"ckbox[".$keyword['ActivityID']."]\"

So my question is, what should the syntax be in place of:

checkboxes = document.getElementsByName('colors[]');

Thank you.

If you’re doing it like that, you’d be better off just looking for checkboxes in a given form and setting them that way.

I don’t know what your form declaration looks like, but if you have an id then do something like this:

function selectAll(source) {
    var inputs = document.getElementById('your-form-id').getElementsByTagName('input');
    for(var i in inputs) {
        if(inputs[i].type === 'checkbox') {
            inputs[i].checked = source.checked;
        }
    }
}

Thanks of that. Can’t get it to work though.

I have the JS just after my body tag:

<script language="JavaScript">
function selectAll(source) {
var inputs = document.getElementById('AveragePricesForm').getElementsByTagName('input');
for(var i in inputs) {
    if(inputs[i].type === 'checkbox') {
        inputs[i].checked = source.checked;
    }
  }
}
</script>

My form tag:

<form name="AveragePricesForm" id="AveragePricesForm" method="POST" action="../keyword_profile_updated_admin_6/index.php?<?php echo($row_CurrentAgent['UserID']); ?>">

And my checkboxes being displayed with:

//Display the checkbox
echo "<td width=\"2%\">";
echo "<input type=\"checkbox\" class=\"checkbox1 styled checkboxrowheight\"";
if (in_array($keyword['ActivityID'],$user_activities_it)) { echo " checked"; }
echo " name=\"ckbox[".$keyword['ActivityID']."]\" id=\"ckbox[".$keyword['ActivityID']."]\">";
echo "</td>\n";

The JS seems OK, as I have it working in a simple example with regular checkboxes - just not working in the example with the looped checkboxes.

You should use the classname. Set classname only one the ones you want grouped together and go back to your original JS.

echo "<input type=\"checkbox\" class=\"checkbox1 styled checkboxrowheight someclassname\"";

Then change:

document.getElementsByName('colors[]');

to

document.getElementsByClassName('someclassname');

Then just disregard my last post and go back to your original code. Name it whatever makes sense or if one of the ones you’ve already used make sense for this, then that’s fine too.

Nearly there I think - its doing something now, but is the reverse of what it should be.

When the ‘select all’ checkbox is ticked, the others are unchecked. And when it is unchecked, all the others are ticked.

Apart from when you first tick the select all.

So from page load:

  1. Nothing ticked.
  2. Check the select all checkbox - nothing happens.
  3. Uncheck the select all checkbox - all the others become checked.
  4. Check the select all checkbox - all the others become unchecked.

I tried changing

checkboxes[i].checked = source.checked;

to

checkboxes[i].unchecked = source.unchecked;

But that just broke it.

Change the select all checkbox from onClick to onChange and see if that works.

The .checked will be true or false. It’s a property of the element.

Same behaviour unfortunately.

Again, works as expected in a basic test example with regular checkbox inputs.

No idea then. Check your error console in your browser. There should be a clue there.

This looks pretty up to date if you don’t know how to open the console. Just find your browser:

Sorry - got stuck looking at something else, and then had a couple of days away.

Couldn’t see any errors in the consoles - looks like its just a conflict between two scripts - one that styles the checkboxes, and one that does the select all.

I created a basic test page with two checkboxes styles, and two default - you can see the select all behaviour working correctly on the unstyled ones, but incorrectly on the styled ones:

http://www.handprintwebdesign.co.uk/testform2.php

A bit frustrating really.

I’m too tired to more now. But I notice if you turn of CSS it works as expected.

Else it looks like the toggle is off one step.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.