0

ターゲットチェックボックスの兄弟の1つがチェックされている場合、親のチェックボックスのチェックを外さないようにするにはどうすればよいですか？

以下は、この回答から変更したコードです。

$(document).ready(function() {
    $('input.liChild').change(function() {
        if ($(this).is(':checked')) {
            $(this).parents('ul').siblings('input:checkbox').attr('checked', true);
        }
        else
        {
            if($(this).parents('ul').siblings('input:checkbox').not(':checked')) 
                $(this).parents('ul').siblings('input:checkbox').attr('checked', false);
        }
    });
});

アイデアは、ターゲットのチェックボックスがどれほど深くても、すべての親のチェックボックスをチェックすることです。次に、ターゲットのチェックボックスがオフになっている場合は、すべての親のチェックボックスを再度オフにします。

私の問題は、ターゲットのチェックボックスの兄弟がチェックされている場合、親のチェックボックスのチェックを外したくないということです。

これが私のjsfiddleです。

編集：

私は自分の解決策を考え出しました、助けてくれてありがとう。

 $('input.liChild').change(function() {
        if ($(this).is(':checked')) {
            $(this).parents('ul').siblings('input:checkbox').attr('checked', true);
            //alert($(this).parents().siblings().find('input:checkbox:checked').length);
            //$(this).parents().siblings().css({background:'red'});
            //$(this).parent().children().css({background:'red'});
        }
        else
        {
            $(this).parent().children().find('input:checkbox:checked').attr('checked', false);

            if($(this).parents().siblings().find('input:checkbox:checked').length == 0) 
                $(this).parents('ul').siblings('input:checkbox').attr('checked', false);


        }
    });
4

2 に答える 2

1

これを見てください：http://jsfiddle.net/D6wky/5/

$('input.liChild').on("change", function() {
  //set the same value for all chilren
  $(this).parent().find('input.liChild').attr("checked", $(this).is(":checked"));

  //we need to run the next block several times
  //until nothing is changed on an iteration
  var something_changed = true;
  while(something_changed) {
    something_changed = false;
    $('input.liChild').each(function() {
      var childs = $(this).parent().find('input.liChild').not(this);
      if (childs.length > 0) {
        //this input has children, so its value must be adjusted 
        //to match children's values
        var anything_checked = childs.filter(":checked").length > 0;
        if ($(this).is(":checked") != anything_checked) {
          $(this).attr("checked", anything_checked);
          //value changed, we need to re-run this procedure 
          //to adjust value of parent checkbox of this item
          something_changed = true;
        }
      }
    });
  };
});

liChild最初のチェックボックスにクラスを追加しました。また、第 2 レベルのリストは で壊れてい</ul><ul>ます。これらのタグは、適切に機能させるために削除しました。

于 2012-11-24T12:13:49.780 に答える
1

このようなちょっとしたもの：

$('input.liChild').change(function() {
    $(this).closest('ul')
           .siblings('input:checkbox')
           .prop('checked', $(this).closest('ul')
                                   .children()
                                   .children('input:checkbox')
                                   .is(':checked'))
           .first().change();
});

デモ: http://jsfiddle.net/D6wky/4/

変更されたチェックボックスの親は次のように見つかります:

$(this).closest('ul').siblings('input:checkbox')

...そして、親のcheckedプロパティは次の結果に設定されます:

$(this).closest('ul').children().children('input:checkbox').is(':checked')

...whereは、呼び出された jQuery オブジェクトのいずれかの要素がチェックされている場合.is(':checked')に返されます。true

次に.change()、効果が上向きにカスケードされるように、親で呼び出されます。（編集：上記から省略できると思います.first()-必要だと思った時点で、デモを変更するのが面倒なのでそのままにしておきます。）

于 2012-11-24T12:15:35.603 に答える