0

プロジェクトでは、複数のチェックボックスを使用して優れたフィルタリング メカニズムを実装したいと考えています。チェックボックスをチェックするときにフォームを自動的に POST する 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 部分に何が必要かということです。ラベルをクリックしてそのグループからすべての選択を解除し、その 1 つのチェックボックスのみを選択できるようにしたいと考えています。また、配列値のフォームを 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 に答える