使用jQuery表單POST選中所有復選框以選中多個復選框

Question

對於一個項目，我想實現一個帶有多個復選框的不錯的過濾機制。 我得到復選框可以正常工作，還有一個jQuery函數可以在選中復選框時自動過帳表單。

現在，我想在復選框上方添加一個“全選”復選框，但是我似乎找不到正確的方法。 我已經針對（類似）類似問題嘗試了十幾種解決方案，但是我無法使其正常，一致地工作。

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>