用jQuery递归实现checkbox树的勾选与否

今天在做添加权限的功能时，发现如果将权限用树展示出来会得到很好的效果，如下：

其中勾线父级目录会让其子目录也跟着勾选，取消父级目录的勾选同样会让子目录取消勾选。

 

其中每一个节点的结构如下：

 

分析一下该节点，有一个class='inverted' ,还有一个value，这个value可以唯一标识当前节点，相当于数据库里面的主键，不会重复（该value是由后台分配而来，这里就不展示后台代码了）。其中有一个自定义的属性data-pid，该属性表明了它有一个父节点，其中父节点的value值为43，如此，通过value和data-pid就构成了一颗树。

具体代码如下：　

<script>
    $(function () {
        var invertedList = $(".inverted");//获取到所有的节点
        //当点击节点的时候
        $(".inverted").click(function () {
            var curId = $(this).val(); //或取该节点的value值
            //通过prop方法获取checked属性，获取的checked返回值为boolean，选中为true,否则为flase
            //如果使用attr方法获取时，如果当前input中初始化未定义checked属性，则不管当前是否选中，$("#selectAll").attr("checked")都会                  返回undefined；
            var IsChecked = $(this).prop("checked");//获取该节点是否选中，选中为true，否则为false
            if(IsChecked){
                //如果选中
                checkedSon(invertedList,curId);//选中该节点时，同时也要选中子节点
            }else{
                //取消选中
                cancelChecked(invertedList,curId);
            }

        });
        function checkedSon(invertedList,curId) {
            //遍历所有的节点
            for(var i = 0;i < invertedList.length; i++){
                var pid = $(invertedList[i]).attr("data-pid");//获取到节点的data-pid值
                //如果节点value值和其他节点的data-pid值相等时，则说明该节点有子节点
                if(pid == curId){
                    checkedSon( invertedList,$(invertedList[i]).val());//递归调用
                    $(invertedList[i]).prop("checked",true);//设置子节点的checked属性为true
                }
            }
        }
        function cancelChecked(invertedList,curId) {
            for(var i = 0;i < invertedList.length; i++){
                var pid = $(invertedList[i]).attr("data-pid");
                if(pid == curId){
                    cancelChecked( invertedList,$(invertedList[i]).val())
                    $(invertedList[i]).prop("checked",false);
                }
            }
        }
    })
</script>

 

 注：上传代码之后发现无法运行，原因是在if判断时，我将注释写在了

if(){ //............将注释写在这儿会报错，具体为什么，不太清楚

}

 

已修改。

转载于:https://www.cnblogs.com/hzStudy/p/7689523.html