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 に答える