<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div id="plugins1"></div> <link href="dist/themes/default/style.min.css" rel="stylesheet" /> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script> <script src="dist/jstree.min.js"></script> <script type="text/javascript"> //Checkbox plugin $(function () { $("#plugins1").jstree({ "checkbox": { "keep_selected_style": false,// 保持選中樣式 true為保持，false為不保存，樣式不影響功能 'three_state': true,//父子節點關聯，true為關聯，false為不關聯 'tie_selection': false, // 'whole_node': false,//復選框與節點關聯 true 為關聯 false為不關聯 }, "plugins": ["checkbox"],//加載插件 checkbox 'core': { 'expand_selected_onload': true,//加載完成后默認展開所有選中節點true為選中 false為不展開 'themes': { dots: true //取消連接線 }, 'data': [ { "text": "Root node 1", "id": "1", "state": { "opened": true,"checked": true }, "children": [ { "text": "Child node 11", "id": "11", "state": { "opened": false, "checked": true } }, { "text": "Child node 22", "id": "22", "state": { "opened": false, "checked": true }, "children": [ { "text": "Child node 221", "id": "221", "state": { "opened": false, "checked": true } }, { "text": "Child node 222", "id": "222", "state": { "opened": false, "checked": true }, } ] }, { "text": "Child node 33", "id": "33", "state": { "opened": false, "checked": true } } ] } ] } }); //checkbox 選中事件 $('#plugins1').on("check_node.jstree", function (node, data, event) { var instance = $('#plugins1').jstree(true);//獲取jstree對象 console.log(instance.get_checked(false));//獲取 所有選中的節點 參數：true（返回對象） false/null（返回ids） var d = instance.get_checked(false); var i = 1; }); //checkbox 取消選中事件 $('#plugins1').on("uncheck_node.jstree", function (node, data, event) { var instance = $('#plugins1').jstree(true);//獲取jstree對象 console.log(instance.get_checked(false));//獲取 所有選中的節點 參數：true（返回對象） false/null（返回ids） var d = instance.get_checked(false); var i = 1; }); }); </script> </body> </html>