Question

虽然这确实使用了我昨天提出的问题（Dynamically check / uncheck checkboxes in a tree）中的一些代码，但我认为这是一个稍微不同的问题，因为我需要添加清除divs并且还要滑动数据在树上上下。

我已经学习了昨天学到的内容，并根据此链接添加了一个滑块 - http://jsfiddle.net/3V4hg/ - 但现在我添加了清除divs树没有取消选中一直到顶部如果树的底部没有选择选项。如果您查看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");
    }
});

^*我已将根定义为<li>元素。应选择第一次出现的.count(r)y_wrap元素，这是使用.eq(0)实现的。

您之前的代码包含一些逻辑错误，我还修复了这些错误：$('.toggle img', this)选择<img>的每个.toggle元素，这会导致箭头结束树也要切换。我使用event.target的解决方案更整洁，并允许您的示例扩展到更深的树。

通过切换/滑动检查/取消选中树 - 几个小的编码问题

1 个答案: