zoukankan      html  css  js  c++  java
  • 用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(){ //............将注释写在这儿会报错,具体为什么,不太清楚

    }

    已修改。

  • 相关阅读:
    手打的table
    高质量程序设计指南C/C++语言——C++/C程序设计入门(2)
    高质量程序设计指南C/C++语言——C++/C程序设计入门
    int *p = NULL 和 *p = NULL(转载)
    C语言深度剖析---预处理(define)(转载)
    C语言--union关键字(转载)
    C语言深度剖析--volatile(转载)
    C语言深度剖析---const关键字(转载)
    C语言循环剖析(转载)
    main函数的参数问题 (转载)
  • 原文地址:https://www.cnblogs.com/hzStudy/p/7689523.html
Copyright © 2011-2022 走看看