jstree Example - Checkboxes

HTML

<script src="http://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script>
<link rel="stylesheet" href="http://static.jstree.com/3.0.0-beta3/assets/dist/themes/default/style.min.css">
<div id="tree">
  <ul>
    <li id="folder_1">Folder 1
      <ul>
        <li id="child_1">Child 1</li>
        <li id="child_2">Child 2
          <ul>
            <li id="child_10">Child 10</li>
            <li id="child_9">Child 9</li>
          </ul>
        </li>

      </ul>
    </li>
    <li id="folder_2">Folder 2</li>
  </ul>
</div>

JavaScript

$(function() {
  $("#tree").jstree({
    "checkbox": {
      "keep_selected_style": false
    },
    "plugins": ["checkbox"]
  });
  $('#tree').on('changed.jstree', function(e, data) {
    var i, j, r = [];
    console.log(JSON.stringify(data, null, 2));
    nodesOnSelectedPath = [...data.selected.reduce(function (acc, nodeId) {
        var node = data.instance.get_node(nodeId);
        return new Set([...acc, ...node.parents, node.id]);
    }, new Set)];
    
    alert('Selected: ' + nodesOnSelectedPath.join(', '));
    console.log('Selected: ' + nodesOnSelectedPath.join(', '));


  });
});