Warning: file_get_contents(/data/phpspider/zhask/data//catemap/0/react-native/7.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如果所有子复选框都已选中,如何使父复选框处于选中状态-在文档准备就绪时?_Javascript_Php_Jquery_Checkbox - Fatal编程技术网

Javascript 如果所有子复选框都已选中,如何使父复选框处于选中状态-在文档准备就绪时?

Javascript 如果所有子复选框都已选中,如何使父复选框处于选中状态-在文档准备就绪时?,javascript,php,jquery,checkbox,Javascript,Php,Jquery,Checkbox,我有几个复选框组,它们的工作方式如下: 基本上,如果选中了所有子复选框,则选中父复选框;如果未选中任何子复选框,则选中父复选框 它工作得很好,除了一个问题: 该页面是交互式的,因此根据从数据库中提取的结果,可以选中所有子复选框(通过HTML中的PHP)。在这种情况下,页面加载时选中了所有子复选框,但未选中父复选框 如何实现在页面完全加载且选中所有子复选框(通过HTML中的PHP)时,也选中该组的父复选框 以下是HTML: <form> <fieldset> <

我有几个复选框组,它们的工作方式如下:

基本上,如果选中了所有子复选框,则选中父复选框;如果未选中任何子复选框,则选中父复选框

它工作得很好,除了一个问题:

  • 该页面是交互式的,因此根据从数据库中提取的结果,可以选中所有子复选框(通过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>
非常简单,只需迭代每个字段集,检查checked的长度与total的长度,并使用
.prop()

拨弄

非常简单,只需迭代每个字段集,检查checked的长度与total的长度,并使用
.prop()

拨弄

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