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 = [];
    for (i = 0, j = data.selected.length; i < j; i++) {
      r.push(data.instance.get_node(data.selected[i]).id.trim());
    }
    alert('Selected: ' + r.join(', '));
    console.log('Selected: ' + r.join(', '));


  });
});