0

对于一个项目，我想用多个复选框实现一个很好的过滤机制。我让复选框正常工作以及在选中复选框时自动发布表单的 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 数组值的表单。最后，如果手动选中所有复选框，则还必须选中“全选”复选框。

希望有人可以帮助我，因为我被困了很长时间......

4

1 回答 1

0 
<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>
于 2013-04-10T17:51:00.123 回答