Question

I have a form that has multiple sets of checkboxes that initially load all checked. When the form is submitted arrays are built in the $_POST based on what checkboxes are “checked”. The entire form is built dynamically via PHP based on database data.

WHAT I’M LOOKING TO ACHIEVE:
I need a button or ‘clickable something’ that will toggle all of the checkboxes, within the group as all “not checked” then when the button is clicked again, it toggles all “checked” again. Or this could be achieved with two buttons. (whichever is cleaner / easier)

EXAMPLE:
(here are just two simple groups of checkbox array)
(each needs to be toggled independently of the other)
(I manually wrapped the code below to display it all in the box below)
(this example is just a representation of what the PHP code builds)
(two buttons are shown in the example but this would probably be best with a one “toggle all” button)

<form action="" method="post" enctype="multipart/form-data" name="filters">

Select: <input name="select_all_regions" onclick="toggle_all_regions()" 
          type="button" value="all" /> 
/ <input name="select_no_regions" onclick="toggle_no_regions()" 
          type="button" value="none" />
<input name="regions[]" type="checkbox" value="7" checked />East Coast
<input name="regions[]" type="checkbox" value="14" checked />West Coast
<input name="regions[]" type="checkbox" value="15" checked />Gulf Coast

Select: <input name="select_all_places" onclick="toggle_all_places()" 
          type="button" value="all" /> 
/ <input name="select_no_places" onclick="toggle_no_places()" 
          type="button" value="none" />
<input name="places[]" type="checkbox" value="25" checked />Dock
<input name="places[]" type="checkbox" value="29" checked />Ramp
<input name="places[]" type="checkbox" value="34" checked />Natural

<input class="filter-button" id="filter-submit-button" name="go" 
          type="submit" value="Go!" />

</form>

I’VE TRIED:
Javascript and jQuery but the “[]” seems to throw them both. I’m sure there is an easy solution but I’ve been unable to find it so far.

Thanks for taking a look!!!

---

UPDATE (so far):

I seem to be doing something wrong (it doesn’t work), is it obvious?

The Code I’ve Tried so far:

   <SCRIPT LANGUAGE="JavaScript"> 
    <!-- Begin 
    var $regions = $('input[name="regions[]"]');
    $('[name="select_all_regions"]').click(function(){
    $regions.prop('checked', !regions.first().is(':checked'));
    });
    // End --> 
    </script>

Select: <input name="select_all_regions" type="button" value="toggle all regions" /><br />

<input class="category-item-checkbox" name="regions[]" type="checkbox" value="7" checked /><span class="category-item-title">Uptown</span>
<input class="category-item-checkbox" name="regions[]" type="checkbox" value="14" checked /><span class="category-item-title">Warehouse District</span>
<input class="category-item-checkbox" name="regions[]" type="checkbox" value="15" checked /><span class="category-item-title">French Quarter</span>

---

SOLVED: (by Depot) See Below.

I’m sure the other solutions may work also but I wasn’t able to get them functional at this point.

THANK YOU ALL for looking at this!!! The StackOverflow community ROCKS!!!

Answer 1

With your exact HTML without the onclick events, you could use:

$('form[name="filters"]').click(function (e) {
    var match = e.target.name.match(/select_(all|no)_(.*)/);
    if (match) {
        $('input[name="' + match[2] + '[]"]').attr('checked', 'all' === match[1] && 'checked');
    }
});

DEMO

or more simply:

var $regions = $('input[name="regions[]"]'),
    $places = $('input[name="places[]"]');

$('input[name="select_all_regions"]').click(function() {
    $regions.attr('checked', 'checked');
});

$('input[name="select_no_regions"]').click(function() {
    $regions.attr('checked', false);
});

$('input[name="select_all_places"]').click(function() {
    $places.attr('checked', 'checked');
});

$('input[name="select_no_places"]').click(function() {
    $places.attr('checked', false);
});

​DEMO