jQuery Checkbox Tree Plugin
Here is my first attempt at a jquery plugin, its something we have used several times at work. It does a couple of things:
- allows you to style checkboxes anyway you like by hiding the actual checkboxes and using css representations of checkboxes;
- and takes nested unordered lists and makes them collapsible
<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.
May 14th, 2008 at 3:19 am
hi,
cool job dude! I’ve reading this thread about your plugin.
http://groups.google.com/group/jquery-en/browse_thread/thread/da18395af07e917e/ede2390cd3ba6a6d?lnk=gst&q=treeview+checkbox#ede2390cd3ba6a6d
Have u implemented the option making all the childs being checked if the parent does?
I’m not good in javascript but i’ll have a look in the code.
Once again, nice job!
June 22nd, 2008 at 7:54 pm
Great plugin.
Just wondering why there is no ability to uncheck a parent, and have all of the children unchecked?
When you check a child, the parent is checked, but not the other way around. If you check the parent in a common tree control, all the children are automatically checked, but not in yours.
Just wondering why you didn’t add that ability.
Marcus
June 22nd, 2008 at 8:25 pm
Marcus, The only reason I did it that way was because the project I originally created it for didnt work that way, we didnt want all the children selected. I have done another one which works the way you expect. And I also believe there is a more widely used tree plugin for jQuery. This was just my first attempt at a plugin. When I get some more time I hope to revisit it. Thanks for checking it out.
July 27th, 2008 at 4:01 am
Dear Matt:
Very appreciate for that.
Would you please show me, How can I expand all the tree at initial.
Thanks.
July 28th, 2008 at 5:07 am
Hello Matt,
Great plugin! Thanks
I was wondering if you could share the code to do what Marcus said:
“If you check the parent in a common tree control, all the children are automatically checked”
Thanks again!
Frederico
August 4th, 2008 at 11:37 am
I have uploaded a newer version to the same place that now allows you to add the setting checkchildren: true (default is false). If you set that option to true the children are automatically checked. But with this functionality the user will no longer be prevented from unchecking a parent checkbox, all the children will just be unchecked if the parent is unchecked.
August 14th, 2008 at 5:34 pm
Hello Matt,
Sorry, just checked your site and saw the update, It’s exactly what i was looking for!
Thank you very much,
Frederico
August 22nd, 2008 at 3:09 am
Hi
The code is very good
But have an error, for example:
You have a node with the attribute checked = true
same :
Your code is wrong, after jour javascript runed, all nodes will be checked !!!
September 5th, 2008 at 10:01 am
Awesome plugin. Looks good too
One suggestion on the checkchildren feature. Say you start with a two-level empty tree. /-/– Select a single node and it’s parent will be automatically selected. Thats cool. Now there are two items selected: the parent and its child node. If you de-select that same child node, it wont automatically de-select the parent, like i would expect it to. If you de-select a node and there aren’t any more selected nodes under its parent, then the parent node should also de-select.
Hope that makes sense…
September 6th, 2008 at 1:40 am
[...] checkbox tree is as good a plugin as any. I modeled it after a project by Matt Wood, (see http://floatmargin.com/2008/jquery-checkbox-tree-plugin/) and updated it to do a few more things, and the code is commented and much simpler to understand [...]
September 6th, 2008 at 2:30 am
[...] with graphics. It’s really small (4.6 Kb) and provides some additional functionality to Matt’s implementation like Half-Checked check boxes when some children are [...]
September 6th, 2008 at 10:08 am
Hi Matt,
I made some improvements to the code to do some of the things people were requesting in these posts. You can see the project at http://static.geewax.org/checktree/index.html
I am also new to jQuery so there’s plenty of comments in the code to see what’s been changed. I also gave a link back to this page as it was the inspiration for the project.
JJG
September 7th, 2008 at 6:54 pm
Anybody looking for this plugin may want to look over at http://jgeewax.wordpress.com/2008/09/06/checktree-check-box-collapsable-tree-jquery-plugin/
JJ Geewax has made some improvements.