如果未选中一个孩子，请取消选中父复选框答案

【问题标题】：Uncheck parent checkbox if one child is unchecked如果未选中一个孩子，请取消选中父复选框
【发布时间】：2013-08-16 12:24:50
【问题描述】：

我正在开发一个需要多个复选框值的应用程序。我有包含复选框的嵌套列表。目前的功能是这样的：

选中父级时，会选中其下的所有子级。
选中子项时，未选中父项。

我需要添加这个功能：

如果在检查父级后取消选中子级，则父级取消选中，但让子级处于选中状态。

$('input[name="level-1"],input[name="level-2"]').bind('click', function () { $('input[type=checkbox]', $(this).parent('li')).attr('checked', ($(this).is(':checked'))); });

我的代码在这里找到：http://jsfiddle.net/dbcottam/Py4UN/

【问题讨论】：

标签： javascript jquery checkbox parent-child unchecked

【解决方案1】：

一个可能的解决方案

然后将一个类someclass 添加到最上面的ul 元素

$('.someclass :checkbox').bind('click', function () {
    var $chk = $(this), $li = $chk.closest('li'), $ul, $parent ;
    if($li.has('ul')){
        $li.find(':checkbox').not(this).prop('checked', this.checked)
    }

    do{
        $ul = $li.parent();
        $parent = $ul.siblings(':checkbox');
        if($chk.is(':checked')){
            $parent.prop('checked', $ul.has(':checkbox:not(:checked)').length == 0)
        } else {
            $parent.prop('checked', false)
        }
        $chk = $parent;
        $li = $chk.closest('li');
    } while($ul.is(':not(.someclass)'));
});

演示：Fiddle

【讨论】：

我在另一个答案上开枪了。虽然另一个确实有效，但这个实际上 100% 满足了我的需求。

【解决方案2】：

我尝试了一个通用函数来处理多个级别。请参阅下面的代码，

$('input[name^="level"]').click(function () {
    //v-- Takes care of check/uncheck all child checkbox
    $(this).parent().find('input[name^=level]').prop('checked', this.checked);

    if (!this.checked) {
        var level = this.name.substring(this.name.length - 1);    
        //using the naming convention `level-n` to uncheck parent
        for (var i = level - 1; i > 0; i--) {
            $('input[name="level-' + i + '"]').prop('checked', false);
        }
    }
});

演示： http://jsfiddle.net/46hTc/

【讨论】：

这以最简单的方式回答了我的问题，谢谢。 Arun P Johny 的解决方案也是可以接受的，并且按照我需要的方式工作。
@DavidCottam 谢谢.. 随意扩展这个函数来处理复杂的结构。