Question

如果检查了一个目标复选框的兄弟姐妹，我怎么能不取消选中父复选框？

以下是我从此answer修改的代码。

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


        }
    });

Answer 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类添加到第一个复选框。此外，您的第二级列表已被</ul><ul>打破。我已删除这些标记以使其正常工作。

Answer 2

有点像这样：

$('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')

... .is(':checked')将返回true，如果调用它的jQuery对象中的任何元素都会被检查。

然后在父母身上调用.change()，以便效果向上级联。（编辑：我认为你可以省略上面的.first() - 当时我认为我需要它，它并没有伤害所以我会离开它，因为我不能被打扰改变演示以匹配。）

如果选中其中一个目标复选框，则如何取消选中父复选框

2 个答案: