今天要做的的是选中与不选中的问题、（后台用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()只可以设置与获取标签自带的属性
好好学习，他天天向上。