动态选中/取消选中树中的复选框

Question

我有一个类似于Uncheck父节点的问题,如果在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,因为checkbox元素始终是输入元素.
• .find(..)寻找匹配选择器的子元素(不是直接子元素)的任何元素."#treeList :checkbox"更快,并具有相同的结果$('#treeList').find(':checkbox').
• 将属性/方法/事件添加到jQuery对象时,将修改与选择器匹配的所有元素.因此,您不必单独循环遍历每个元素:jQuery.each(jQuery('#treeList :checkbox'), function(){ jQuery(this).change(...)})可以缩短为jQuery('#treeList :checkbox').change(...).
• change更改复选框检查状态后,您不必触发,因为该功能已经处理完整的树.