javascript - 如果选中所有子复选框，如何选中父复选框

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 复选框仍然没有更改为选中。 if 语句中的条件为真。或者也许我比较长度的想法行不通？

.cb 我的 child 类(class)复选框#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" />