如果选中所有子复选框，如何选中父复选框 - 在文档就绪时

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

本文关键字：复选框 文档 就绪 何选中 如果      更新时间：2023-09-26

我有几组复选框，它们的工作方式类似于这个jsFiddle：

http://jsfiddle.net/3vker/

基本上，如果选中所有子复选框，则选中父复选框，如果未选中

任何子复选框，则取消选中父复选框。

它工作得很好，除了一个问题：

  • 该页面是交互式的，因此可以根据从数据库中提取的结果选中所有子复选框（通过 HTML 中的 PHP）。在这种情况下，页面加载时选中了所有子复选框，但未选中父复选框。

我如何实现当页面完全加载并选中所有子复选框（通过 HTML 中的 PHP）时，该组的父复选框也被选中？

这是 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>

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

实际上非常简单，只需遍历每个字段集，检查检查的长度与总的长度，并使用.prop()更改父字段的检查属性

小提琴 http://jsfiddle.net/3vker/1/

相关文章：