如果选中所有子复选框，如何检查父复选框 - 文档准备好了吗？

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:

• The page is interactive, so ALL of the child checkboxes may be checked (via PHP in HTML) depending on the result that is pulled from the database. In that case, the page loads with all the child checkboxes checked but the parent checkbox is not checked.

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

$('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/