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

Question

Please how can i add and display the numbers of checked checkboxes on this line of codes.

This is how the checkboxes works: It has a parent and child checkbox; when i check the parent checkbox (Checkall), it checks all (child checkboxes) and displays a div, when i each child checkbox (Single), it displays the div as well, and when i uncheck (Parent/Child) the div hides (jquery hide and show).

So, my problem here is that i want to add checkbox counter to the code. How to display the number count when i check the parent (Check all) and when i check each child (Single), and my div will still display (hide and show).

Please, help. Thanks a lot in advance. You can improve the codes (renovate) or rewrite. Here is the code below

 $(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"> 

I'll be so glad :)

Answer 1

This displays the number of child checkboxes that are checked:

 $(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">