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));
    var nodesOnSelectedPath = Object.keys(data.selected.reduce(function (acc, nodeId) {
        var node = data.instance.get_node(nodeId);
        node.parents.forEach(function (id) {
            acc[id] = 1;
        });
        acc[node.id] = 1;
        return acc;
    }, {}));
    
    alert('Selected: ' + nodesOnSelectedPath.join(', '));
    console.log('Selected: ' + nodesOnSelectedPath.join(', '));


  });
});