Question

我有一个包含多个复选框组的jQuery脚本。如果选择了'Parent'，它也应该选择所有'Child'框，如果未选择任何'Child'框，那么也应该取消选择'Parent'，只选中选中的'Child'框。

问题在于，使用jQuery 1.4.2过去效果很好，但自从升级到1.10.2后它仍然有效，但只有ONCE。这意味着，如果你单击“父1”，它就可以了。然后你取消选择'Parent 1'它也有效，但如果你再单击'Parent 1'再次选择它，它就不再有用了。

这里有什么问题？

以防万一，这是HTML：

<form>
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Parent 1<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-1<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-2<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-3<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-4<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 1-5<br />
</fieldset>
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Parent 2<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-1<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-2<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-3<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-4<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 2-5<br />
</fieldset>
<fieldset>
<input type="checkbox" class="parentCheckBox" /> Parent 3<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-1<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-2<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-3<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-4<br />
&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" class="childCheckBox" /> Child 3-5<br />
</fieldset>
</form>

和jQuery：

$(document).ready(
    function() {
        //clicking the parent checkbox should check or uncheck all child checkboxes
        $(".parentCheckBox").click(
            function() {
                $(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('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);
                }
            }
        );
    }
);

Answer 1

只需更改代码中的以下行

即可

$(this).parents('fieldset:eq(0)').find('.childCheckBox').attr('checked', this.checked);

with：

$(this).parents('fieldset:eq(0)').find('.childCheckBox').prop('checked', this.checked);

Answer 2

使用.prop()代替.attr()

Working fiddle

.prop('checked', this.checked);

属性和属性之间存在差异   元件。属性是初始状态，属性是   现状。

您正在设置选项的属性，该属性仅适用于   元素没有要开始的属性。在那之后   属性接管并设置属性对该属性没有影响   目前的状态。

如果要更改选择状态，则需要设置   属性而不是属性：

阅读.prop() vs .attr()

Answer 3

我很难跟踪您的代码，但我想出了这个可能更容易阅读的内容。其他人对.prop()和.attr()所说的都属实。

我认为这会按你喜欢的方式运作。

$('fieldset')
  .on('change', '.parentCheckBox', function(){

    var $parentCheckBox = $(this),
        $childCheckBoxes = $parentCheckBox.closest('fieldset').find('.childCheckBox');

    if( $childCheckBoxes.filter(':checked').length > 0 ){
      $childCheckBoxes.prop('checked', false);
      $parentCheckBox.prop('checked', false);
    } else {
      $childCheckBoxes.prop('checked', true);
    }

  })
  .on('change', '.childCheckBox', function(){

    var $this = $(this)
        $childCheckBoxes = $this.closest('fieldset').find('.childCheckBox'),
        $parentCheckBox = $this.closest('fieldset').find('.parentCheckBox'),
        allSelected = $childCheckBoxes.filter(':checked').length === $childCheckBoxes.length;

    $parentCheckBox.prop('checked', allSelected);

  });

以下是快速演示：http://jsbin.com/eriSaha/4/edit?js,output

jquery复选框组只检查/取消选中一次

3 个答案: