jQuery Checkbox Tree Plugin
A new version has been released.
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
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.
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.
November 24th, 2008 at 8:16 pm
Thanks, this is a fabulous plugin!
Saved me alot of time.
JJG’s plugin is handy too, but from the example provided it seems his plugin layout child nodes in a cascading fashion rather than vertically.?
That is, instead of
- Fun Province
– Fun City
– Not Fun City
it is displayed in:
- Fun Province
– Fun City
– Not Fun City
Now a quick question, I suppose the RESET button inside a form is not suppose to work for this plugin?
Thanks
An Chi
November 24th, 2008 at 8:18 pm
Sorry, the examples above didn’t turn out well.
Let me try again.
Instead of
- Fun Province (level 1)
– Fun City (level 2)
– Not Fun City (level 2)
JJG’s plugin displays it like:
- Fun Province (level 1)
– Fun City (level 2)
— Not Fun City (level 3)
Thanks
An Chi
February 28th, 2009 at 12:34 pm
Hi,
Can u please tell me that from where i will get all .gif file. Because I am not getting anywhere all those image file in your site.
Can u please provide following file
“images/checkboxtree/img-arrow-collapsed.gif”.
“images/checkboxtree/img-arrow-expanded.gif”.
“images/checkboxtree/img-arrow-blank.gif”.
March 1st, 2009 at 9:48 am
http://floatmargin.com/demos/checkboxtree/images/checkboxtree/img-arrow-collapsed.gif
http://floatmargin.com/demos/checkboxtree/images/checkboxtree/img-arrow-expanded.gif
http://floatmargin.com/demos/checkboxtree/images/checkboxtree/img-arrow-blank.gif
You may want to try the version somebody else did – http://code.google.com/p/jquery-checktree/
March 10th, 2009 at 5:06 am
Looks good, I’m wondering how you would configure the page so that nodes can be expanded and show previously checked options. For example if it were used on an update page where the user can view and edit their previous choices?
By default the nodes always appear collapsed and unchecked onload?
Thanks