選擇所有複選框與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>