我如何将选中复选框的数量添加到此 jquery / js 代码

Question

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

复选框的工作原理如下：它有一个 parent 和 child 复选框；当我选中 parent 复选框（Checkall）时，它会选中所有（child 复选框）并显示一个 div，当我每个 child 复选框（单个）时，它会显示div 同样，当我取消选中 (Parent/Child) 时，div 隐藏（jquery 隐藏和显示）。

所以，我的问题是我想在代码中添加复选框计数器。当我检查 parent（检查全部）和当我检查每个 child（单个）时如何显示计数，我的 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">

我如何将选中复选框的数量添加到此 jquery / js 代码

How can i add the numbers of checked checkbox to this jquery / js code

html

javascript

css

checkbox

jquery