jq 多级全选全不选，选中子复选框自动选中父、祖父的复选框。取消所有子复选框时自动去除父级的复选框

今天要做的的是选中与不选中的问题、（后台用tp5.1）

jq 多级全选全不选，选中子复选框自动选中父、祖父的复选框。取消所有子复选框时自动去除父级的复选框。常用语多级选择场景。

先上代码；

<p> <input type="checkbox" id="checkAll" >全选</p>
<ul>
//第一层
    {volist name="data" id="vo" default="$default"}
    <li class="UpperLevel">
        <p>
        //$rowpid是该记录的在库中的数据。用{in}来做默认选中
            <input type="checkbox" value="{$vo.id}"  name="power" {in name="$vo.id" value="$rowpid"}checked {/in}>
            {$vo.r_name}
        </p>
        //判断该记录是否有son 也就是下一级
        {if strtoupper(isset($vo.son)) }
        <ul
        //第二层
            {volist name="vo.son" id="voson" empty="1"}
            <li class="UpperLevel">
                <p>
                    <input type="checkbox" value="{$voson.id}" name="power"  {in name="$voson.id" value="$rowpid"} checked {/in} >
                    {$voson.r_name}
                </p>
            </li>
            {/volist}
        </ul>
        {/if}
    </li>
    {/volist}
</ul>
<script>
//全选
$("#checkAll").click(function () {
    var check = $(this).prop("checked")
    $("ul :checkbox").prop('checked',check);
})
// 点击父级选中子类所有数据
// 点击子类自动选中父级
$(":checkbox").click(function () {
    var check = $(this).prop("checked")
    if(check){
        //先找到他的父级节点<p>再找他的下一个兄弟节点 在找所有的复选框 改变他的checked
        $(this).parent().next().find(":checkbox").prop("checked",check)
        //循环每一层下的p标签下的复选框
        $(this).parents('.UpperLevel').each(function () {
        //选中第一个p标签下的复选框
            $(this).find('p:eq(0)').children(':checkbox').prop("checked",check)
        })
    }else{
    //取消复选框
        $(this).parent().next().find(":checkbox").prop("checked",check)
        //循环每一层下的li标签下的复选框选中的个数
        $(this).parents('.UpperLevel').each(function () {
            var checkedLen =  $(this).find('li').find(":checkbox:checked").length
            if (checkedLen <= 0){
                $(this).find('p:eq(0)').children(':checkbox').prop("checked",check)
            }
        })
    }
})
</script>

html 代码要格式固定这样才可以不管是几层的数据这个js都可以用。

    input一定要放在一个标签里我这里是p。

我在做的时候也遇到了一点问题，是复选框选中后就无法被全选按钮选中，话来发现是因为我用的是.attr()来设置全选属性的。后来我改成。prop()就好了。

attr()和prop()的差别还是需要掌握的。

attr()可以设置与获取自定义的属性。prop()只可以设置与获取标签自带的属性

好好学习，他天天向上。