Simple jQuery Plugin For Checkbox Tree View - Checktree

Checktree is a lightweight and simple jQuery plugin for creating a hierarchical list of check boxes. When any parent within the hierarchy is selected, their children become selected.

Basic Usage:

1. Create a checkbox tree view using nested unordered lists.

<ul id="tree">
<li>
<label>
<input type="checkbox" />
Level 1 - 1</label>
</li>
<li>
<label>
<input type="checkbox" />
Level 1 - 2</label>
<ul>
<li>
<label>
<input type="checkbox" />
Level 2 - 1</label>
<ul>
<li>
<label>
<input type="checkbox" />
Level 3 - 1</label>
</li>
<li>
<label>
<input type="checkbox" />
Level 3 - 2</label>
<ul>
<li>
<label>
<input type="checkbox" />
Level 4 - 1</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<li>
<label>
<input type="checkbox" />
Level 1 - 3</label>
</li>
<li>
<label>
<input type="checkbox" />
Level 1 - 4</label>
</li>
</li>
</ul>

2. Include the javascript library and jQuery checktree plugin at the bottom of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery-checktree.js"></script>

3. Call the plugin.

<script>
$('#tree').checktree();
</script>

4. Put styles in your CSS and change it to your taste.

ul.checktree-root, ul#tree ul {
list-style: none;
}
ul.checktree-root label {
font-weight: normal;
position: relative;
}
ul.checktree-root label input {
position: relative;
top: 2px;
left: -5px;
}

---

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