Select all checkbox with jQuery form POST for multiple checkboxes - php

Question

For a project I want to implement a nice filtering mechanism with multiple checkboxes. I get the checkboxes to work correctly as well as a jQuery function to automatically POST the form when checking a checkbox.
Now I want to add a "select all" checkbox above the checkboxes, but I cannot seem to find the correct way. I have tried a dozen solutions for (somewhat) similar questions but I cannot get it to work correctly and consistent.
The HTML part is something like this:
<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
<input type="checkbox" /> Select All colors<br/>
<label> <input type="checkbox" name="color[]" value="yellow"> Yellow</label><br/>
<label> <input type="checkbox" name="color[]" value="blue"> Blue</label><br/>
<label> <input type="checkbox" name="color[]" value="red"> Red</label><br/>
<label> <input type="checkbox" name="color[]" value="green"> Green</label><br/><br/>
<input type="checkbox" /> Select All brands<br/>
<label> <input type="checkbox" name="brand[]" value="Nike"> Nike</label><br/>
<label> <input type="checkbox" name="brand[]" value="Adidas"> Adidas</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeBrand"> SomeBrand</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeOtherBrand"> SomeOtherBrand</label><br/>
</form>
The jQuery part I use to post the form on each click on the checkbox (is not sufficient):
$('input:checkbox:').live('click',function() {
$(this).closest('form').submit();
});
My question now is what do I need for the jQuery part to make sure this works correctly?
I want to be able to click the label to deselect all from that group and select only that one checkbox. It also needs to POST the form for the array values. And lastly if all checkboxes are checked manually the "select all" one has to be checked as well.
Hopefully someone can help me out as I am stuck with this for a long time...

Answer 1

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#colorall").click(function()
{
var checked_status = this.checked;
$(".color").each(function()
{
this.checked = checked_status;
});
});
$(".color").click(function(){
if($(".color").length == $(".color:checked").length) {
document.getElementById("colorall").checked = true;
} else {
$("#colorall").removeAttr("checked");
}
});
$("#brandall").click(function()
{
var checked_status = this.checked;
$(".brand").each(function()
{
this.checked = checked_status;
});
});
$(".brand").click(function(){
if($(".brand").length == $(".brand:checked").length) {
document.getElementById("brandall").checked = true;
} else {
$("#brandall").removeAttr("checked");
}
});
});
</script>
<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
<input type="checkbox" id="colorall" /> Select All colors<br/>
<label> <input type="checkbox" name="color[]" value="yellow" class="color"> Yellow</label><br/>
<label> <input type="checkbox" name="color[]" value="blue" class="color"> Blue</label><br/>
<label> <input type="checkbox" name="color[]" value="red" class="color"> Red</label><br/>
<label> <input type="checkbox" name="color[]" value="green" class="color"> Green</label><br/><br/>
<input type="checkbox" id="brandall"/> Select All brands<br/>
<label> <input type="checkbox" name="brand[]" value="Nike" class="brand"> Nike</label><br/>
<label> <input type="checkbox" name="brand[]" value="Adidas" class="brand"> Adidas</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeBrand" class="brand"> SomeBrand</label><br/>
<label> <input type="checkbox" name="brand[]" value="SomeOtherBrand" class="brand"> SomeOtherBrand</label><br/>
</form>