Динамически проверять / снимать флажки в дереве

Question

У меня есть вопрос, похожий на Снимите флажок с родительского узла, если все дочерние элементы сняты с проверки в JQuery (с помощью этого решения), и попытался изменить его так, чтобы дочерние узлы также все снимали с проверки, если родительский контроль не проверен ( выше / ниже не получается).

JSFiddle для вышеперечисленного (http://jsfiddle.net/fRxVs/)

jQuery.each(jQuery('#treeList ul li').find(':checkbox'),  function(){
    jQuery(this).change(function (){
        if (jQuery(this).is(':checked')) {
                      jQuery(this).parentsUntil('#treeList').siblings().filter('input:checkbox').attr('checked', true).trigger('change');
        }else{

            jQuery(this).parents('ul:first').siblings('input:checkbox').prop('checked', $(this).parent().siblings().children('input:checked').length).trigger('change');
        }        
    });    
});

Хотя я не уверен почему, но мне пришлось изменить prop с последней строки на attr, чтобы он по какой-то причине корректно работал как JSFiddle локально ...

В основном у меня есть 3 уровня настройки:

Grand-Parent
- Parent
-- Child

• Если grandparent отмечен / не отмечен, то его дети и внуки тоже должны быть отмечены / не отмечены.
• Если parent отмечен / не отмечен, его дочерние элементы должны быть отмечены / сняты вместе с его родителем.
• Если отмечен children, то должны быть проверены его родитель и дед (если не проверены дочерние элементы, родитель не должен проверяться).

Я пытаюсь изменить это на Континент, Страна, Регион - я думаю, вы поймете, если бы я просто сказал это ...

Спасибо

Answer 1

Вот решение: Скрипка: http://jsfiddle.net/fRxVs/55/

$('#treeList :checkbox').change(function (){
    $(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
    if (this.checked) {
        $(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true);
    } else {
        $(this).parentsUntil('#treeList', 'ul').each(function(){
            var $this = $(this);
            var childSelected = $this.find(':checkbox:checked').length;
            if (!childSelected) {
                $this.prev(':checkbox').prop('checked', false);
            }
        });
    }
});

Модификации и пояснения

• $ в точности совпадает с jQuery. Будьте последовательны при его использовании: jQuery следует использовать только в том случае, если вы не уверены, переписан ли $ === jQuery ($?).
• :checkbox - это селектор, который соответствует каждому input[type="checkbox"]. Устанавливать input:checbkox устарело, поскольку элемент флажка всегда является элементом ввода.
• .find(..) ищет любой элемент, который является дочерним (не обязательно прямым дочерним) совпадающего селектора. "#treeList :checkbox" быстрее и имеет эквивалентный результат как $('#treeList').find(':checkbox').
• Когда свойство / метод / событие добавляется в объект jQuery, все элементы, соответствующие селектору, будут изменены. Следовательно, вам не нужно проходить через каждый элемент отдельно: jQuery.each(jQuery('#treeList :checkbox'), function(){ jQuery(this).change(...)}) можно сократить до jQuery('#treeList :checkbox').change(...).
• Вам не нужно запускать change после изменения состояния флажка, поскольку функция уже заботится о полном дереве.

Answer 2

Старый вопрос, но вы можете просто сделать это так:

$('input[type=checkbox]').change(function(){
    $(this).next().find('input[type=checkbox]').prop('checked', this.checked);
    $(this).parents('ul').prev('input[type=checkbox]').prop('checked', function(){
        return $(this).next().find(':checked').length;
    });
});

Скрипка: http://jsfiddle.net/ojc1qg1f/