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 !!!