使用切换/滑动检查/取消检查树 - 一些小的编码问题

Question

虽然这确实使用了我昨天提出的问题中的一些代码（动态检查/取消选中树中的复选框），我觉得这是一个稍微不同的问题，因为我需要添加清除 div 并在树中上下滑动数据。

我已经将昨天学到的内容添加到滑块中，按照此链接 - http://jsfiddle.net/3V4hg / - 但现在我添加了清除 div 如果树的底部没有选择任何选项，树不会一直取消选中到顶部。如果您查看 JSFiddle，如果选中 A 和/或 B 然后取消选中它，则父级和祖级不会自动取消选中。另外，由于某种我还没有弄清楚的原因 - 滑块决定在单击子区域中的复选框时滑动（我还注意到，当大陆切换时，区域区域显示的切换图像会发生变化 -没有尝试解决这个问题，就像添加到 JSFiddle 时注意到的那样）。

我还认为可能有更好的方法来编码切换器/滑块（因为被不止一种切换器使用，但我不确定）。

Answer 1

小提琴：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");
    }
});

^* 我已将根定义为

元素。应选择第一次出现的 .count(r)y_wrap 元素，这是使用 .eq(0) 实现的。

您之前的代码包含一些逻辑错误，我也已修复： $('.toggle img', this) 选择作为子元素的每个 元素.toggle，这导致树末端的箭头也切换。我使用 event.target 的解决方案更加简洁，并且允许您的示例扩展到更深的树。