floatmargin

Here is my first attempt at a jquery plugin, its something we have used several times at work. It does a couple of things:

1. allows you to style checkboxes anyway you like by hiding the actual checkboxes and using css representations of checkboxes;
2. and takes nested unordered lists and makes them collapsible

If you have html like this:

<ul class="mytree">
  <li>
    <input type="checkbox" name="foo" value="whatever" />
    <label>Item 1</label>
  <ul>
    <li>
      <input type="checkbox" name="foo" value="whatever" />
      <label>Child Item 1</label>
    </li>
  </ul>
  </li>
</ul>

All you need to use checkbox tree is this:

jQuery(document).ready(function(){
  jQuery(".mytree").checkboxTree({
    collapsedarrow: "images/checkboxtree/img-arrow-collapsed.gif",
    expandedarrow: "images/checkboxtree/img-arrow-expanded.gif",
    blankarrow: "images/checkboxtree/img-arrow-blank.gif"
  })
})

Those three options are the different states of each node in the tree. You can see a working example and see the required css at this demo. You can get the plugin at floatmargin.com/demos/checkboxtree/js/jquery.checkboxtree.js. Feel free to use the images and css from the demo. And leave any comments and improvements.