<!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>