#yyds干货盘点#ZTree多选实例可参考（多选获取值）

原创

bitters 2022-03-18 17:38:50 博主文章分类：Web前端 ©著作权

文章标签 edn html 复选框 文章分类 jQuery 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者bitters的原创作品，请联系作者获取转载授权，否则将追究法律责任

html的代码如下

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE> ZTREE DEMO </TITLE>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="http://www.treejs.cn/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="http://www.treejs.cn/v3/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.42/js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/zTree.v3/3.5.42/js/jquery.ztree.excheck.min.js"></script>

 </HEAD>

<BODY>
    tree demo
    <div class="zTreeDemoBackground">
        <ul id="treeDemo" class="ztree"></ul>
    </div>

    <button class="btn"> 获取值</button>
</BODY>
</HTML>

js代码

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        $(".btn").click(function(){
           var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo"); 
           var checkedNodes = zTreeObj.getCheckedNodes();
          // 获取光标选中的(selected)
            var selectedNodes = zTreeObj.getSelectedNodes();
            //上面两个函数获取到的都是数组，你可以 console.log(checkedNodes) ，调试看一下。
            alert("nodes:" + JSON.stringify(checkedNodes));  //查看
        })
    });

    var setting = {
       view: {
                dblClickExpand: true,
                selectedMulti : true,//可以多选
                showLine: true
            },
    check: {  
                enable: true ,//显示复选框  
                chkStyle : "checkbox"
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    var zNodes =[
            { id:1, pId:0, name:"湖北省", open:true},
            { id:11, pId:1, name:"武汉市", open:true},
            { id:111, pId:11, name:"汉口"},
            { id:112, pId:11, name:"武昌"},
            { id:12, pId:1, name:"黄石市", open:true},
            { id:121, pId:12, name:"黄石港区"},
            { id:122, pId:12, name:"西塞山区"},
            { id:2, pId:0, name:"湖南省", open:true},
            { id:21, pId:2, name:"长沙市"},
            { id:22, pId:2, name:"株洲市", open:true},
            { id:221, pId:22, name:"天元区"},
            { id:222, pId:22, name:"荷塘区"},
            { id:23, pId:2, name:"湘潭市"}
        ];
</script>