从 PHP 中提取的目录列表中的 jQuery 属性父复选框

Question

我的目标是在嵌套列表中“支持”父复选框。现在我在 PHP 中拉入一个目录列表，如下所示：

function listDirectories($dir, $i, $howDeep) {
            $lastFolder = end(explode("/", $dir));
            $listString .='<li class="closed"><span class="folder"><input type="checkbox" class="userPermissionCheckBox" parent="'.$i.'" howDeep="'.$howDeep.'" value="'.$dir.'" />'.str_replace('_', ' ', $lastFolder).'</span>';
            foreach (glob($dir."/*", GLOB_ONLYDIR) as $d) {
                $howDeep++;
                $listString .='<ul>';
                $listString .=' '.listDirectories($d, $i, $howDeep).' ';
                $listString .='</ul>';
                $i++;
                $howDeep = 1;
            }
            $listString .='</li>';
            return $listString;
        }

这太棒了！，然后我将此 jquery/js 函数绑定到复选框，以在选择父级时“支持”所有子框，如下所示：

 var isAlreadyChecked = $(this).prop('checked');
            $(this).parents(':eq(1)').find('.userPermissionCheckBox').each(function () {
                $(this).prop('checked', isAlreadyChecked);
            });

这也很棒。

我卡住的地方是如果有人在不检查父框的情况下检查子框，它会自动检查父框......所以我尝试了这样的事情：

var isAlreadyChecked = $(this).prop('checked');
             var parentNumber = Number($(this).attr('parent'));
             var howDeepIsNest = Number($(this).attr('howDeep'));
            $(this).parents(':eq(1)').find('.userPermissionCheckBox').each(function () {
                $(this).prop('checked', isAlreadyChecked);
            });
            if(howDeepIsNest > 1){
                var immediateParent = howDeepIsNest - 1;
                $('.userPermissionCheckBox[howDeep='+immediateParent+']').prop('checked', true);
            }

这种工作方式，显然子框的自动道具效果很好，但我无法自动检查父框的工作。我愿意接受任何建议。感谢您抽出宝贵时间阅读本文。

Answer 1

这将：

• 取消/选中所有子项
• 检查所有父母
• 如果所有兄弟姐妹也都未选中，则取消选中直接父项

小提琴：http://jsfiddle.net/a7WDk/1/

$('input:checkbox').on('change', function() {
    var $this = $(this),
        $lis = $this.parents('li'),
        $parents = $lis.find('> span > input:checkbox').not(this),
        $children = $lis.eq(0).find('input:checkbox').not(this),
        $related = $lis.eq(0).siblings().find('input:checkbox');

    if($this.is(':checked')) {
        $parents.add($children).attr('checked', 'checked');
    } else {
        if($children.length) {
            $children.removeAttr('checked');
        }

        if($related.length && !$related.is(':checked')) {
            $parents.eq(0).removeAttr('checked').trigger('change');
        }
    }
});