javascript - 我如何将选中的复选框的数量添加到这个 jquery/js 代码

Question

请问我如何在这行代码中添加和显示选中复选框的数量。

复选框是这样工作的:它有一个父子复选框；当我检查父复选框(Checkall)时，它检查所有(子复选框)并显示一个 div，当我每个子复选框(单个)时，它也显示 div，当我取消选中(父/子)时，div 隐藏(jquery 隐藏和显示)。

所以，我的问题是我想在代码中添加复选框计数器。当我检查父项(检查所有)和检查每个子项(单个)时如何显示数字计数，我的 div 仍然会显示(隐藏和显示)。

请帮忙。非常感谢。您可以改进代码(翻新)或重写。这是下面的代码

$(document).ready(function() {
  $('#global').click(function() {
    $('.child').prop('checked', $(this).is(':checked'));

    if ($(this).is(':checked'))
      $('#mydiv').show();
    else
      $('#mydiv').hide();
  });

  $('.child').change(function() {
    var checkedLength = $('.child:checked').length;
    if (checkedLength > 0)
      $('#mydiv').show();
    else
      $('#mydiv').hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv" style="display:none;">RESTORE | DELETE</div>

<input type="checkbox" id="global">
<br>
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">

我会很高兴:)

Answer 1

这显示选中的子复选框的数量:

$(document).ready(function() {
  $('#global').click(function() {
    $('.child').prop('checked', $(this).is(':checked'));

    if ($(this).is(':checked'))
      $('#mydiv').show();
    else
      $('#mydiv').hide();

    count();
  });

  $('.child').change(function() {
    var checkedLength = $('.child:checked').length;
    if (checkedLength > 0)
      $('#mydiv').show();
    else
      $('#mydiv').hide();
    count();
  });
});

var count = function() {
   var i = $('input.child:checked').length;
   $('#counter').html(i);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mydiv" style="display:none;">RESTORE | DELETE
<span>Checked: </span>
<span id="counter"></span>
</div>

<input type="checkbox" id="global">
<br>
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">
<input type="checkbox" class="child">