使用jQuery form POST选中所有复选框以获取多个复选框

时间:2013-04-10 17:31:06

标签: php jquery html

对于一个项目,我想实现一个带有多个复选框的漂亮过滤机制。我得到了正确的复选框以及一个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表单中的数组值。最后,如果手动检查所有复选框,则还必须检查“全选”。

希望有人可以帮助我,因为我长期坚持这个......

1 个答案:

答案 0 :(得分: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>