如果选中所有子复选框，如何检查父复选框

Question

我想从我的checkall和uncheckall按钮（我已经有一个工作）创建一个单独的功能。 这次我想检查checkall / uncheckall chekcbox是否选中了所有子复选框。

我想也许我可以比较我的托运儿童复选框长度与儿童复选框长度。

function testFunction() {
    $('.cb').change(function(){
        var checkedChildCheckBox = $('.cb:checked').length;
        var numberOfChildCheckBoxes = $('.cb').length;
        if (checkedChildCheckBox == numberOfChildCheckBoxes){
           $("#checkAll").prop('checked', true);
        }
   })
}

有人可以给我一些想法吗？ 仍然我的checkall / uncheckall复选框没有更改为选中。 如果声明，条件是真实的。 或许我比较长度的想法不会起作用？

.cb我的儿童班复选框#checkall我的父ID或checkall / uncheckall复选框

Answer 1

它已经在工作了我猜 - 问题是将事件监听器放在一个函数中（不知道为什么会这样）。

无论如何，请看下面的演示：

 var numberOfChildCheckBoxes = $('.cb').length; $('.cb').change(function() { var checkedChildCheckBox = $('.cb:checked').length; if (checkedChildCheckBox == numberOfChildCheckBoxes) $("#checkAll").prop('checked', true); else $("#checkAll").prop('checked', false); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="checkAll">All</label> <input type="checkbox" id="checkAll" /> <br/> <br/> <input class="cb" type="checkbox" /> <input class="cb" type="checkbox" /> <input class="cb" type="checkbox" /> 

Answer 2

Try below code




 Js
    <script type="text/javascript">
    $(document).ready(function(){
        $('#select_all').on('click',function(){
            if(this.checked){
                $('.checkbox').each(function(){
                    this.checked = true;
                });
            }else{
                 $('.checkbox').each(function(){
                    this.checked = false;
                });
            }
        });

        $('.checkbox').on('click',function(){
            if($('.checkbox:checked').length == $('.checkbox').length){
                $('#select_all').prop('checked',true);
            }else{
                $('#select_all').prop('checked',false);
            }
        });
    });
    </script>

Html
<ul class="main">
    <li><input type="checkbox" id="select_all" /> Select all</li>
    <ul>
        <li><input type="checkbox" class="checkbox" value="1"/>Item 1</li>
        <li><input type="checkbox" class="checkbox" value="2"/>Item 2</li>
        <li><input type="checkbox" class="checkbox" value="3"/>Item 3</li>
        <li><input type="checkbox" class="checkbox" value="4"/>Item 4</li>
        <li><input type="checkbox" class="checkbox" value="5"/>Item 5</li>
    </ul>
</ul>