floatmargin

I have rewritten my jQuery plugin released last year, checkboxtree. A lot of options were asked for in the comments and I have tried to add all of those. Plus the old code made me cringe. I have updated the demos. And I have started a github repository.

The setup is the same. The html should look 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();
})

The options to be passed in as an object are as follows:

expandedarrow

blankarrow

activeClass

hoverClass

checkchildren

checkparents

collapsed

hidecbwithjs

checkedClass

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.