javascript - jquery复选框组检查/取消选中只工作一次

Question

我有一个包含多个复选框组的 jQuery 脚本。如果选择了“父”，它还应该选择所有“子”框，如果未选择任何“子”框，则“父”也应该被取消选择，并且只选中选中的“子”框。

这是一个 jsFiddle：http: //jsfiddle.net/9NmE7/

问题是，使用 jQuery 1.4.2 这曾经很好用，但自从升级到 1.10.2 后它仍然可以工作，但只有一次。这意味着，如果您单击“父 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);

和 ：

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

Answer 2

使用.prop()而不是.attr()

工作小提琴

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

元素的属性和属性是有区别的。属性是初始状态，属性是当前状态。

您正在设置选项的属性，该属性仅在元素没有开头的属性时才有效。之后，属性接管并设置属性不再对当前状态产生影响。

当你想改变选择状态时，你想设置属性而不是属性：

阅读.prop() 与 .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