0

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

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

$(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在第一个复选框中添加了类。此外，您的二级列表与</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')

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

然后.change()在父级上调用，以便效果向上级联。（编辑：我认为您可以从上面省略.first()- 当时我认为我需要它，而且它不会受到伤害，所以我会留下它，因为我不会费心将演示更改为匹配。）

于 2012-11-24T12:15:35.603 回答