CODEWITHSUNDEEP
javascriptphpjquerycheckbox
user2643870
user2643870

Reputation: 1065

how to make parent checkbox checked if all child checkboxes are checked - on document ready?

I have a few groups of checkboxes, which work like in this jsFiddle:

http://jsfiddle.net/3vker/

Basically the parent checkbox is checked if all the child checkboxes are checked, and the parent checkbox unchecked if any of the child checkboxes are unchecked.

It's working great, except for one problem:

How do I achieve so that when the page is fully loaded and all the child checkboxes are checked (via PHP in HTML), that the parent checkbox of that group is also checked?

Here is the HTML:

<form>

<fieldset>
<input type="checkbox" class="parentCheckBox" /> Africa
<div class="content">
<input type="checkbox" value="" name="countries_option[]" class="childCheckBox" <?php if (in_array("algeria", $is_checked)) {?>checked="checked"<?php }?>/> Algeria<br />
<input type="checkbox" value="" name="countries_option[]" class="childCheckBox" <?php if (in_array("namibia", $is_checked)) {?>checked="checked"<?php }?>/> Namibia<br />
</div>
</fieldset>

<p></p>

<fieldset>
<input type="checkbox" class="parentCheckBox" /> Europe
<div class="content">
<input type="checkbox" value="" name="countries_option[]" class="childCheckBox" <?php if (in_array("unitedkingdom", $is_checked)) {?>checked="checked"<?php }?>/> United Kingdom<br />
<input type="checkbox" value="" name="countries_option[]" class="childCheckBox" <?php if (in_array("italy", $is_checked)) {?>checked="checked"<?php }?>/> Italy<br />
</div>
</fieldset>
</form>

And the jQuery:

$(document).ready(
    function() {

        $('input.childCheckBox').change(function() {
            $(this).closest('fieldset').find('.parentCheckBox').prop('checked',
                $(this).closest('.content').find('.childCheckBox:checked').length === $(this).closest('.content').find('.childCheckBox').length 
            ); 
        });

        //clicking the parent checkbox should check or uncheck all child checkboxes
        $(".parentCheckBox").click(
            function() {
                $(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked);
            }
        );
        //clicking the last unchecked or checked checkbox should check or uncheck the parent checkbox
        $('.childCheckBox').click(
            function() {
                if ($(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked') == true && this.checked == false)
                    $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', false);
                if (this.checked == true) {
                    var flag = true;
                    $(this).parents('fieldset:eq(0)').find('.childCheckBox').each(
                        function() {
                            if (this.checked == false)
                                flag = false;
                        }
                    );
                    $(this).parents('fieldset:eq(0)').find('.parentCheckBox').attr('checked', flag);
                }
            }
        );
    }
);

Upvotes: 1

Views: 5237

Answers (1)

ahren
ahren

Reputation: 16959

$('fieldset').each(function(){
  var $childCheckboxes = $(this).find('input.childCheckBox'),
      no_checked = $childCheckboxes.filter(':checked').length;

  if($childCheckboxes.length == no_checked){
    $(this).find('.parentCheckBox').prop('checked',true);
  }
});

Pretty simple really, just iterate over each fieldset, checking the length of checked vs the length of total and changing the checked property of the parent using .prop()

Fiddle http://jsfiddle.net/3vker/1/

Upvotes: 4

Related Questions