如果选中所有 children 复选框，如何选中 parent 复选框

Question

我想从我的 checkall 和 uncheckall 按钮中创建一个单独的功能（我已经有一个可以使用）。这次我要检查我的 checkall/uncheckall chekcbox 如果所有 children 复选框都被选中。

我在想也许我可以比较我选中的 children 复选框长度和 children 复选框长度。

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

有人可以给我一些想法吗？我的 checkall/uncheckall 复选框仍然没有更改为选中。 if 语句中的条件为真。或者也许我比较长度的想法行不通？

.cb 我的 class 用于 children 复选框 #checkall 我的 id parent 或 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>

如果选中所有 children 复选框，如何选中 parent 复选框

How to check parent checkbox if all children checkboxes are checked

html

javascript

checkbox

jquery

jquery-selectors