Question

如果您检查列表中的孩子，则应检查所有父母。

如果你取消检查列表中的孩子并且还有其他孩子被检查，那么父母应该继续检查。

最后，如果你取消检查列表中的所有孩子，那么父母也应该被取消检查

<li data-id="1">
    <input class="cat_check" data-pid="0" type="checkbox" value="1" id="1" checked/>Exterior Signs
        <ul class="category_select_list">
            <li data-id="15">
                <input class="cat_check" data-pid="1" type="checkbox" value="15" id="15" checked/>Monument
            </li>
            <li data-id="17">
                <input class="cat_check" data-pid="1" type="checkbox" value="17" id="17" checked/>Channel Letters
                <ul class="category_select_list">
                    <li data-id="28">
                        <input class="cat_check" data-pid="17" type="checkbox" value="28" id="28" checked/>Neon Channel Letter
                    </li>
                </ul>
            </li>
            <li data-id="16">
                <input class="cat_check" data-pid="1" type="checkbox" value="16" id="16" checked/>Banners
            </li>
        </ul>
    </li>

每个框都有一个id和data-pid属性

data-pid是其父级，0 =顶级

霓虹频道快报有一个17岁的孩子

和频道字母的pid为1 - 父母为霓虹灯，外部孩子为

和外部标志的pid为0 - 顶级父级

 $('.cat_check').click(function () {
    tid = $(this).attr('value');
    state = $(this).prop('checked');
    pid = $(this).data('pid');
    check_parent(pid, state);
    cc(tid, state);

    function cc(tid, state) {
        $(':input').each(function () {
            if ($(this).data('pid') == tid) {
                $(this).prop('checked', state);
                cc($(this).attr('value'), state)
            }

        });
    }
});

//此功能有效，除非您取消检查孩子并且仍然检查了孩子。然后它取消检查父母。

function check_parent(pid, state){
    if (pid != 0){
        $('#'+pid).prop('checked', state);
        this_pid = $('#'+pid).data('pid');
        check_parent(this_pid, state);
    }

感谢您的任何建议和帮助!!

Answer 1

检查jsFiddle。代码需要重构，但功能应该根据您的需要。

function checkSiblings(target) {
    var siblingsChecked = 0;
    target.parent('li').siblings('li').children('input').each(function(i, el){
        if ($(el).is(':checked')) {
            siblingsChecked++;
        }
    });

    if (siblingsChecked === 0) {
        var possibleParent = target.parent('li').parents('li').eq(0).children('input');
        if (possibleParent.length) {
            //console.log('we have a parent');
            possibleParent.prop('checked', false);
        }
        else {
            //console.log('nothing');
        }
    }
}

$('.cat_check').on('click', function (ev) {
    if ($(this).is(':checked')) {
        $(this).parents('li').each(function(i, el){
            $(el).children('input').prop('checked', true);
        });
    }
    else {
        $(this).parent('li').find('input').prop('checked', false);
        checkSiblings($(this));
    }
});

更新代码：http://jsfiddle.net/gZEry/

function checkSiblings(target) {
    var siblingsChecked = 0;
    target.parent('li').siblings('li').children('input').each(function(i, el){
        if ($(el).is(':checked')) {
            siblingsChecked++;
        }
    });

    if (siblingsChecked === 0) {
        var possibleParent = target.parent('li').parents('li').eq(0).children('input');
        if (possibleParent.length) {
            //console.log('we have a parent');
            possibleParent.prop('checked', false);
        }
        else {
            //console.log('nothing');
        }
    }
}

$('.cat_check').on('click', function (ev) {
    if ($(this).is(':checked')) {
        // check all children
        $(this).parent('li').each(function(i, el){
            $(el).find('input').prop('checked', true);
        });
        // check inputs on the way up
        $(this).parents('li').each(function(i, el){
            $(el).children('input').prop('checked', true);
        });
    }
    else {
        $(this).parent('li').find('input').prop('checked', false);
        checkSiblings($(this));
    }
});

使用Jquery - 在父/子复选框的嵌套列表中 - 根据子状态检查或取消选中父级

1 个答案: