0

如果您在列表中选中一个孩子，则所有父母都应该被选中。

如果您取消选中列表中的一个孩子并且还有其他孩子被选中，则父母应该保持选中状态。

最后，如果您取消选中列表中的所有孩子，则父母也应该取消选中

http://jsfiddle.net/snEfq/14/

<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=顶级

Neon Channel Letters 的 pid 为 17 - child

并且频道字母的 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);
    }

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

4

1 回答 1

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));
    }
});
于 2013-03-10T19:30:15.047 回答