Collapsible/Checkable Hierarchical Tree Plugin - jQuery CheckTree

CheckTree is a jQuery plugin that takes a nested list and converts it into a collapsible, expandable, and checkable hierarchical tree.

It allows you to add checkboxes next to each list item in the list to expand/collapse its children. Great for quickly creating a list of sub-items that show the relationship between them.

The jQuery plugin is currently available for use in all personal or commercial projects under both MIT and GPL licenses. This means that you can choose the license that best suits your project and use it accordingly.

How to use it:

1. Add checkboxes to each node in your nested HTML list as follows:

<ul class="tree">
  <li>
    <input type="checkbox">
    <label>United States</label>
    <ul>
      <li>
        <input type="checkbox" value="pennsylvania">
        <label>Pennsylvania</label>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox">
    <label>Canada</label>
    <ul>
      <li>
        <input type="checkbox" value="british_columbia">
        <label>British Columbia</label>
      </li>
    </ul>
  </li>
  <li>
    <input type="checkbox" value="afghanistan">
    <label>Afghanistan</label>
  </li>
  <li>
    <input type="checkbox">
    <label>Sealand</label>
    <ul class='expanded'>
      <li>
        <input type="checkbox" value="tree_city">
        <label>Tree City</label>
      </li>
      <li>
        <input type="checkbox" value="oil_province">
        <label>Oil Province</label>
        <ul>
          <li>
            <input type="checkbox" value="oil_city">
            <label>Oil City</label>
          </li>
        </ul>
      </li>
      <li>
        <input type="checkbox" value="fun_province">
        <label>Fun Province</label>
        <ul>
          <li>
            <input type="checkbox" value="fun_city">
            <label>Fun City</label>
          </li>
          <li>
            <input type="checkbox" value="not_fun_city">
            <label>Not Fun City</label>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

2. Download and load the jquery.checktree.js script after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.checktree.js"></script>

3. Initialize the plugin on the HTML list.

$(function(){
  $('ul.tree').checkTree({
    // ...
  });
});

4. Apply CSS styles to the hierarchical tree.

ul.tree, ul.tree * {
  list-style-type: none;
  margin: 0;
  padding: 0 0 5px 0;
}

ul.tree img.arrow {
  padding: 2px 0 0 0;
  border: 0;
  width: 20px;
}

ul.tree li {
  padding: 4px 0 0 0;
}

ul.tree li ul {
  padding: 0 0 0 20px;
  margin: 0;
}

ul.tree label {
  cursor: pointer;
  font-weight: bold;
  padding: 2px 0;
}

ul.tree label.hover {
  color: red;
}

ul.tree li .arrow {
  width: 20px;
  height: 18px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  float: left;
  background: transparent no-repeat 0 0px;
}

ul.tree li .collapsed {
  background-image: url(images/right.svg);
}

ul.tree li .expanded {
  background-image: url(images/down.svg);
}

ul.tree li .checkbox {
  width: 20px;
  height: 18px;
  padding: 0;
  margin: 0;
  cursor: pointer;
  float: left;
  background: url(images/square.svg) no-repeat 0 0px;
}

ul.tree li .checked {
  background-image: url(images/check.svg);
}

ul.tree li .half_checked {
  background-image: url(images/square-minus.svg);
}

5. Determine how to interact with the label. Default: 'expand'.

$(function(){
  $('ul.tree').checkTree({
    labelAction: "check",
  });
});

6. Available callback functions. These callbacks should be functions that take one argument. The checkbox tree will return the jQuery wrapped LI element of the item that was checked/expanded.

$(function(){
  $('ul.tree').checkTree({
    onExpand: null,
    onCollapse: null,
    onCheck: null,
    onUnCheck: null,
    onHalfCheck: null,
    onLabelHoverOver: null,
    onLabelHoverOut: null,
  });
});

Changelog:

2022-10-13

• BUGFIX: Allow applying the plugin multiple times to same element

---

This awesome jQuery plugin is developed by yeurch. For more Advanced Usages, please check the demo page or visit the official website.