Simple Plain Checkbox Tree Plugin - jQuery Checktree

Just another jQuery based checkbox tree plugin that displays your hierarchical data in a tree structure with checkboxes.

How to use it:

1. Insert your hierarchical data with checkboxes into nested html lists as follows:

<ul class="checktree">
  <li>
    <input id="administration" type="checkbox" /><label for="administration">Administration</label>
    <ul>
      <li>
        <input id="president" type="checkbox" /><label for="president">President</label>
        <ul>
          <li>
            <input id="manager1" type="checkbox" /><label for="manager1">Manager 1</label>
            <ul>
              <li><input id="assistantmanager1" type="checkbox" /><label for="assistantmanager1">Assistant Manager 1</label></li>
              <li><input id="assistantmanager2" type="checkbox" /><label for="assistantmanager2">Assistant Manager 2</label></li>
              <li><input id="assistantmanager3" type="checkbox" /><label for="assistantmanager3">Assistant Manager 3</label></li>
            </ul>
          </li>
          <li><input id="manager2" type="checkbox" /><label for="manager2">Manager 2</label></li>
          <li><input id="manager3" type="checkbox" /><label for="manager3">Manager 3</label></li>
        </ul>
      </li>
      <li>
        <input id="vicepresident" type="checkbox" /><label for="vicepresident">Vice President</label>
        <ul>
          <li><input id="manager4" type="checkbox" /><label for="manager4">Manager 4</label></li>
          <li><input id="manager5" type="checkbox" /><label for="manager5">Manager 5</label></li>
          <li><input id="manager6" type="checkbox" /><label for="manager6">Manager 6</label></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

2. Insert jQuery JavaScript library and the jQuery Checktree plugin into the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/checktree.js"></script>

3. Add your own CSS styles to the tree structure.

ul {
  list-style-type: none;
  margin: 3px;
}

ul.checktree li:before {
  height: 1em;
  width: 12px;
  border-bottom: 1px dashed;
  content: "";
  display: inline-block;
  top: -0.3em;
}

ul.checktree li { border-left: 1px dashed; }

ul.checktree li:last-child:before { border-left: 1px dashed; }

ul.checktree li:last-child { border-left: none; }

4. Activate the plugin by calling the function on the top html list.

$(function(){
  $("ul.checktree").checktree();
}); 

---

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