选择所有复选框与jQuery形式POST多个复选框

Question

对于一个项目，我想实现一个很好的过滤机制与多个复选框。我收到复选框正常工作，以及一个jQuery函数来检查复选框时自动POST表单。

现在我想添加复选框上方的“全选”复选框，但我似乎无法找到正确的方法。我已经尝试了十几种解决方案（有些）类似的问题，但我无法使其正确和一致地工作。

的HTML部分是这样的：

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

我用它来发布关于该复选框每次点击的形式jQuery的部分（是不够的）：

$('input:checkbox:').live('click',function() { 
    $(this).closest('form').submit(); 
}); 

我现在的问题是什么我需要的jQuery的一部分，以确保这项工作正常？ 我希望能够单击标签以取消选择该组中的所有内容，并仅选中该复选框。它还需要POST数组值的形式。最后，如果手动检查所有复选框，则也必须检查“全选”。

希望有人能帮助我，因为我坚持这一长一段时间......

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>