jQuery / JavaScript: Check all checkboxes and Check each checkbox to display div

Question

I am having a hard time figuring this out. I tried to make a global checkbox that will check all other sub-checkboxes and display a div, which works fine, but the issue is when i try to make each sub-checkboxes check and display the div themselves.

I wrote jquery hide and show for it.

When I check the first sub-checkbox, and check the second; the div displays but when i go back and uncheck the first one, the div closes and one and on due to the hide and show function, how can i do this?

Here is my code below.

<script>
$(document).ready(function(){
    $('#checkbox-global').click(function(){
        if($(this).is(':checked'))
            $('.checkbox-group').prop('checked', true);
        else
            $('.checkbox-group').prop('checked', false);
    });
});

$(document).ready(function(){
    $('#checkbox-global').click(function(){
        if($(this).is(':checked'))
            $('.loaded').show(1000);
        else
            $('.loaded').hide(1000);
    });
});

$(document).ready(function(){
    $('.checkbox-group').click(function(){
        if($(this).is(':checked'))
            $('.loaded').show(1000);
        else
            $('.loaded').hide(1000);
    });
});

     <!-- The Div -->
      <div class="loaded">RESTORE | DELETE</div>

    <!-- The Global Checkbox -->
    <input type="checkbox" id="checkbox-global" class="checkbox-group">
    <br>

    <!-- The Sub-checkboxes -->
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">
    <input type="checkbox" class="checkbox-group">

Answer 1

You don't need to use document.ready multiple times, one is enough. This is to ensure that all DOM structure is ready and you can get the desired element at that point.

following are the points to consider
1) No need to bind click event twice for checkedLength , you can put checkbox check/uncheck and div show / hide logic in same click event handler.
2) You can check if any other checkbox is checked from checkbox-group , if none is checked then hide div otherwise show it.

$(document).ready(function(){
    $('#checkbox-global').click(function(){
        // check uncheck checkbox as per checked status
        $('.checkbox-group').prop('checked', $(this).is(':checked'));

        //show hide div
        if($(this).is(':checked'))
           $('.loaded').show(1000);
        else
          $('.loaded').hide(1000);
    });

    $('.checkbox-group').change(function(){
        //check if checkbox-group have atleast one checkbox checked
        var checkedLength =  $('.checkbox-group:checked').length;
        if(checkedLength > 0)
          $('.loaded').show(1000);
        else
         $('.loaded').hide(1000);
    });
});

Answer 2

You have to check for any of the check boxes is checked and if yes don't hide the div Here is a sample code:

$(document).ready(function(){

$('#checkbox-global').click(function(){
    if($(this).is(':checked')){
        $('.checkbox-group').prop('checked', true);
        $('.loaded').show(1000);
    }
    else {
        $('.checkbox-group').prop('checked', false);
        $('.loaded').hide(1000);
    }
});

   $('.checkbox-group').click(function(){
       var cnt = $(".checkbox-group:checked").length;
      if(cnt > 0)
         $('.loaded').show(1000);
      else
         $('.loaded').hide(1000);
    });
});

Answer 3

Try this code :

HTML

<!-- The Div -->
<div class="loaded">RESTORE | DELETE</div>
<!-- The Global Checkbox -->
<input type="checkbox" id="checkbox-global" class="checkbox-group">
<br>
<!-- The Sub-checkboxes -->
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">
<input type="checkbox" class="checkbox-group">

jQuery

$(function () {
    $(".loaded").hide();
    $("#checkbox-global").click(function () {
        if ($("#checkbox-global").is(":checked")) {
            $(".checkbox-group").prop("checked", true);
        } else {
            $(".checkbox-group").prop("checked", false);
        }
    });

    $(":checkbox").click(function () {
        if ($(".checkbox-group").is(":checked")) {
            $(".loaded").show(1000);
        } else {
            $(".loaded").hide(1000);
        }
    });
});

Answer 4

Try this

$(document).ready(function(){
    var c = $('.checkbox-group').size();  //This line is used to count checkbox
    $('#noc').html(c);
    $('#checkbox-global').click(function(){
        if($(this).is(':checked')) {
            var nocf = $(":checked").size()
            $('#noch').html(nocf);
            $('.checkbox-group').prop('checked', true);
            $('.loaded').show();
        }
        else {
            $('.checkbox-group').prop('checked', false);
            $('.loaded').hide();
            var nocf = $(":checked").size()
            $('#noch').html(nocf);
        }  
    });

    $('.checkbox-group').click(function(){
        var tom = $('#checkbox-global').is(':checked');
        if(tom == true || $('.checkbox-group').is(':checked')) {
            var nocf = $(":checked").size()
            $('#noch').html(nocf);
            console.log($(":checked").size());  //This line is used to count checked checkbox
            $('.loaded').show();
        }
        else{
            $('.loaded').hide();
            var nocf = $(":checked").size()
            $('#noch').html(nocf);
        }
     });
});

Answer 5

$(function() {

    var checked = true;

    $("#all_check").on("change", function() {

        checked = $(this).is(':checked');

        if (checked) {

          $('.dg-img').prop('checked', true);

        }

         else

         {

        $('.dg-img').prop('checked', false);

         }

    });