How can i correct this jquery / js checkbox code

Question

I've been having a hard time figuring this codes out.

The checkbox codes functions like this:

There is a global checkbox (Check all) and there are child (Single) checkboxes. If the (global) checkbox is checked, all the (child) checkboxes will be checked as well, a div will show, and if the global is unchecked, it un-checks the (child) checkboxes and the div will hide (jquery hide and show). The the numbers of the checked checkboxes will be displayed.

This is the problem; is if a child checkbox is unchecked, the global checkbox still remains checked and if all the child checkboxes are checked, the global checkbox should be checked immidiately as well.

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

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

All support are apreciated. Thanks in advance.

@DanielA.White the title mean, how can i improve this code to work like I want. There is an issue. — Hacketo
– Hacketo, Commented Jan 9, 2015 at 15:31
@Daniel @ Rory McCrossan @ Hacketo Sorry for the way i posted it, i mean, how can i correct that error of the global and child checkboxes as i explained above — Sowemimo Bamidele
– Sowemimo Bamidele, Commented Jan 9, 2015 at 15:35

DannielR · Accepted Answer · 2015-01-09 16:01:41Z

change #global to .global

This should work. Only one event is needed.

$(document).ready(function() {
  var child = $('.child');
  var global = $('.global');

  $('input').on("change", function() {
    //check if checkbox is the global one
    if($(this).hasClass("global")) {
      //if yes, then set all childs to checked true, if not, then to false
      ($(this).prop('checked')) ? child.prop('checked', true) : child.prop('checked', false);
    } else {
      var oneChecked = false;
      //every change on a checkbox go though all childboxes an check if on of them is checked
      child.each(function() {
        if($(this).prop('checked') == true) {
          oneChecked = true;
        }
      });
      //if one was checked global has to be checked, if no one was checked it has to be false
      (oneChecked) ? global.prop('checked', true) : global.prop('checked', false);
    } 
  });
});

PeterKA · Accepted Answer · 2015-01-09 16:04:07Z

1

$(document).ready(function() {
  var div = $('#mydiv'),
      global = $('#global'),
      childchecks = $(':checkbox.child');

  global.on('change', function() {
    childchecks.prop('checked', this.checked);
    var how = this.checked ? 'show' : 'hide';
    div[how]();
  });

  childchecks.on('change', function() {
    global.prop('checked', childchecks.length === childchecks.filter(':checked').length );
    var how = childchecks.length === childchecks.filter(':checked').length ? 'show' : 'hide';
    div[how]();
  });
});

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

edited Jan 9, 2015 at 16:04

answered Jan 9, 2015 at 15:50

PeterKA

24.7k5 gold badges28 silver badges52 bronze badges

5 Comments

PeterKA Over a year ago

Click the Code Snippet Ctrl-M icon ... it is the last icon in the second set of icons.

gratz Over a year ago

Doesn't uncheck children when unchecking global?

gratz Over a year ago

This 'childchecks.prop('checked', true);' should be something like 'childchecks.prop('checked', this.checked);'

PeterKA Over a year ago

Good catch @gratz. It should be fixed now.

PeterKA Over a year ago

@SowemimoBamidele, what's the problem with the current version? What do you mean by Not yet working?

Raphaël Pellicier · Accepted Answer · 2015-01-09 15:50:37Z

0

Try :

$(document).ready( function(){
    $('#global').change( function(){
        var bIsChecked = $(this).is(':checked');
        $('.child').prop('checked', bIsChecked );
        $('#mydiv')[ bIsChecked ? 'show' : 'hide' ]();
        count();
    });

    $('.child').change( function(){
        var n = count();
        $('#mydiv')[ n>0 ? 'show' : 'hide' ]();
        $('#global')[0].checked = n==$('.child').length ;
    });
});

var count =function(){
   var n = $('.child:checked').length;
   $('#counter').html( n );
   return n
}

answered Jan 9, 2015 at 15:50

Raphaël Pellicier

1921 silver badge1 bronze badge

1 Comment

Sowemimo Bamidele Over a year ago

One more request please.... I want to re-use the code on a the same page, but not working. The project is like a (tabbed mail UI). I used the code above inbox, so i changed all the parameter and re-use for outbox but not working. How do i go about it

Collectives™ on Stack Overflow

How can i correct this jquery / js checkbox code

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related