Проверить / снять галочку с дерева с переключателем / слайдом - несколько мелких проблем с кодированием

Question

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

Я взял то, что узнал вчера, и добавил в слайдер по этой ссылке - http://jsfiddle.net/3V4hg/ - но теперь у меня естьдобавлена ​​очистка divs дерево не снимает флажок до самого верха, если в нижней части дерева нет выбранных опций.Если вы посмотрите на JSFiddle, если вы отметите A и / или B, а затем уберите галочку, родитель и дедушка не снимают галочку автоматически.Кроме того, по какой-то причине, которую я еще не выяснил - ползунок решает скользить при нажатии флажка в дочерней области (я также заметил, что изображение переключения для области региона изменяется при переключении континента 1).Я не пытался решить эту проблему, как только что заметил при добавлении в JSFiddle).

Я также думаю, что может быть лучший способ кодирования переключателей / ползунков (поскольку используется более чем одним видом переключения, но я не уверен).

Answer 1

Fiddle: http://jsfiddle.net/3V4hg/2/

Я применил некоторые модификации к вашему коду.Взгляните на скрипку и комментарии (в коде и внизу ответа):

$('#delivery_zones :checkbox').change(function(){
     $(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
     if(this.checked){
         $(this).parentsUntil('#delivery_zones', 'ul').siblings(':checkbox').prop('checked', true);
     } else {                   
         $(this).parentsUntil('#delivery_zones', 'ul').each(function() {
             var $this = $(this);
             var childSelected = $this.find(':checkbox:checked').length;
             if(!childSelected){
                // Using `prevAll` and `:first` to get the closest previous checkbox
                $this.prevAll(':checkbox:first').prop('checked', false);
             }
         });
     }
});

// collapse countries and counties onload
$(".country_wrap").hide();                
$(".county_wrap").hide();                                 

// Merged two click handlers
$("#delivery_zones").click(function(event){
    var root = event.target;              // Get the target of the element
    if($.nodeName(root, 'input')) return; // Ignore input
    else if(!$.nodeName(root, 'li')) {
        root = $(root).parents('li').eq(0); // Get closest <li>
    }
    // Define references to <img>
    var img = $('.toggle img', root).eq(0);
    // Define reference to one of the wrap elements *
    var c_wrap = $('.country_wrap, .county_wrap', root).eq(0);
    if(img.attr('src') == "http://uk.primadonna.eu/images/arrow_white_up.gif"){
        img.attr('src', 'http://www.prbuzzer.com/images/downarrow-white.png');
        c_wrap.slideUp("slow");
    } else {
        img.attr('src', 'http://uk.primadonna.eu/images/arrow_white_up.gif');
        c_wrap.slideDown("slow");
    }
});

^* Я определил корень как элемент <li>,Первое вхождение элемента .count(r)y_wrap должно быть выбрано с помощью .eq(0).

Ваш предыдущий код содержал некоторые логические ошибки, которые я также исправил: $('.toggle img', this) выбирает каждый элемент <img>который является потомком .toggle, из-за которого стрелки на конце дерева тоже переключались.Мое решение, использующее event.target, более изящно и позволяет распространить ваш пример на более глубокие деревья.