Clever Geek Handbook

JQuery / JavaScript: check all checkboxes and check every checkbox to show the div

It's hard for me to understand this. I tried to make a global checkbox that will check all other sub-checkboxes and display the div which works fine, but the problem is I am trying to check each checkbox and show the div itself.

I wrote jquery hide and show for it.

When I check the first sub-checkbox and check the second; div is showing, but when I go back and take off the first one, the div is closed and one and one because of 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">
+3


source to share


5 answers


You should check that the checkbox is checked, and if so, don't hide the div Here is some 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);
    });
});
+1


source


You don't need to use document.ready

multiple times, one is enough. This is to ensure that the entire DOM structure is ready and you can get the desired element at this point.

the following points follow: 1) No need to bind the click event twice for checkedLength

, you can set the check / uncheck and the show / hide logic div in the same click event handler.
2) You can check if any other checkbox is checked from checkbox-group

, if none is checked then hide the 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);
    });
});
+2


source


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);
        }
    });
});
0


source


try it

$(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);
        }
     });
});
0


source 


$(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);

         }

    });
-1


source






More articles:


All Articles