I am trying to figure out how to add and display the count of checked checkboxes with this set of codes.
Here's how the checkboxes function: There is a parent checkbox (Checkall) and multiple child checkboxes; when the parent checkbox is checked, it selects all child checkboxes and reveals a div. When each child checkbox (Single) is checked, the div is displayed as well. If the Parent/Child checkbox is unchecked, the div hides using jQuery hide and show methods.
The issue I am facing is adding a checkbox counter to the code. I need to display the count when the parent checkbox (Check all) is checked, as well as when individual child checkboxes (Single) are checked while still maintaining the functionality of showing and hiding the div.
Your assistance is greatly appreciated. Feel free to enhance or rewrite the code provided 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 appreciate your help :)