1

複数のチェックボックス グループを持つ jQuery スクリプトがあります。「親」が選択されている場合は、すべての「子」ボックスも選択する必要があり、「子」ボックスが選択されていない場合は、「親」も選択解除され、選択された「子」ボックスのみがチェックされたままになります。

ここに jsFiddle があります: http://jsfiddle.net/9NmE7/

問題は、jQuery 1.4.2 ではこれがうまく機能していたことですが、1.10.2 にアップグレードしてからはまだ機能しますが、一度しか機能しません。つまり、「親 1」をクリックすると機能します。次に、「親 1」の選択を解除しても機能しますが、「親 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);
                }
            }
        );
    }
);
4

3 に答える 3

0

私はあなたのコードをたどるのに苦労していましたが、読みやすいかもしれないこれを思いつきました。他の誰もが言ったこと.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

于 2013-10-28T14:02:50.200 に答える