如果选中了目标复选框的兄弟姐妹之一，如何不取消选中父母的复选框

Question

如果选中了目标复选框的兄弟姐妹之一，我如何不取消选中父母的复选框？

下面是我从这个答案修改的代码。

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

这个想法是检查所有父母的复选框，无论目标复选框有多深。然后，如果未选中目标复选框，请再次取消选中所有父母的复选框。

我的问题是，如果选中了目标复选框的兄弟姐妹，我不想取消选中父母的复选框。

这是我的杰斯菲琴。

编辑：

我制定了自己的解决方案，谢谢大家的帮助。

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

有点像这样：

$('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() - 当时我认为我需要它，而且它没有伤害，所以我会离开它，因为我懒得更改演示以匹配。

Answer 2

看看这个： 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>打破。我已经删除了这些标签以使事情正常工作。