Web Design Ashford

Collapsible Checkbox Tree jQuery Plugin

Wednesday 11th November, 2009

This plugin for jQuery takes a standard nested hierarchy of checkboxes, and turns them into a collapsible tree.

There are one or two similar plugins floating around on the web, but none that worked exactly as we needed for a recent project.

Creating our own purpose-built plugin was the only way to go, and here are the results.

Demo

View an example in a new page

Useage

The plugin can be called in the usual way :

jQuery(document).ready(function(){
     $('ul#example').collapsibleCheckboxTree();
});

There are also a handful of options :

jQuery(document).ready(function(){
     $('ul#example').collapsibleCheckboxTree({

          // When checking a box, all parents are checked (Default: true)
               checkParents : true,

          // When checking a box, all children are checked (Default: false)
               checkChildren : false,

          // When unchecking a box, all children are unchecked (Default: true)
               uncheckChildren : true,

          // 'expand' (fully expanded), 'collapse' (fully collapsed) or 'default'
               initialState : 'default'

     });
});

Download

Download Collapsible Checkbox Tree (zipped, 24KB)

Release Notes

4th Jan 2010
1.0.1 – Bug fix – Clicking the three expand/contract state buttons resulted in the form being unexpectedly submitted when used within a form.

11th Nov 2009
1.0 – Initial release

Comments

1. Thank you for publishing this plugin.

   MashaB
   December 9, 2009 at 8:00 am

2. Also a very big thank you for publishing this!

   You’ve answered with this my question:
   http://groups.google.com/group/jquery-en/browse_thread/thread/a97aa5ead71a196f

   cheers

   Charlie
   December 12, 2009 at 5:55 pm

3. Thanks for publishing this plugin.

   Any plan to support expandable feature like add one node to the tree?

   Hubert Chang
   December 13, 2009 at 5:54 am

4. At this stage, there are no plans to add any new features. We always intended this to be a simple solution to a problem, nothing more.

   The source code is clearly commented, so customising the plugin for your own needs should be fairly straightforward.

   Lewis Jenkins
   December 13, 2009 at 5:16 pm

5. When adding the tree to a form, clicking the three expand/contract state buttons results in the form being posted. Is there a way to prevent this?

   Thomas Hunter
   January 4, 2010 at 5:45 pm

6. @Thomas Hunter

   Yes, you are correct.

   I have updated the plugin and the examples with a fix, so simply download the latest version.

   For your information, I added

   return false;

   to the three functions that control each button’s behaviour, near the bottom of the script. That prevents links and buttons from being submitted as normal.

   Thanks for pointing that out.

   Lewis Jenkins
   January 4, 2010 at 11:42 pm

7. Nice plugin,

   Is there a way to use a differently styled checkbox to show that some children are selected, but the actual parent is not. In other words, if I select only “coffee”, drinks and hot will be selected but will look different than if I actually select drinks or hot.

   thanks,
   Igor.

   Igor
   February 5, 2010 at 4:17 pm

8. @Igor

   This plugin does not use css styling for the checkboxes, so only the default ‘checked’ or ‘unchecked’ states are available.

   Lewis Jenkins
   February 5, 2010 at 5:53 pm

9. This is really great and will be perfect for my current project. Many thanks!

   Tony Garcia
   February 6, 2010 at 12:42 am

10. Thank you very much!!!!^_^

    Hyun-min Park
    May 6, 2010 at 5:51 am

11. Sweet!
    This works super and fits right into my project!
    For some reason it renders the 3 buttons twice and I get doubles of the plus signs… I’m sure I will sort it out though.

    Henrik W.
    May 27, 2010 at 3:48 pm

12. A little contribution.

    If you want parent nodes to be unchecked when all their children are, find this code:

    if (defaults.uncheckChildren) {
$(this).parent("li").find("input[type='checkbox']").attr('checked', false);
// Hide all children
$("ul", $(this).parent("li")).addClass('hide');
// Update the tree
$("span.expanded", $(this).parent("li")).removeClass("expanded").addClass("collapsed").html('+');
}

    and add this just after it:

    if (defaults.uncheckParent) {
// Check if all the children of this item parent are unchecked...
if ( $(this).parent("li").parent("ul").find("li").find("input[type='checkbox']:checked").attr('checked')!=true ){
//...and uncheck parent if so
$(this).parent("li").parent("ul").parent("li").find("input[type='checkbox']").attr('checked', false );
}
}

    You obviously have to add uncheckParent : true, within defaults array. That’s it.

    Konrad
    June 29, 2010 at 2:54 pm

13. Just noticed it doesn’t work properly, if you have nested uls. Needs to be amended a bit. Sorry for that.
    One needs to check the tree further up in this case. I will write the necessary code and post it here.

    Konrad
    June 30, 2010 at 8:33 am

14. Thanks for making this!

    I tweaked the code slightly so that a shift-click would select children.

    I created a github repository with my changes. Feel free to fork and make suggestions there.

    Sean Wallace
    August 3, 2010 at 12:17 am

15. How to hide or remove the button Expand All,Collapse All,Default?

    Safique Ahmed Faruque
    August 5, 2010 at 11:06 am

16. Safique:

    I added this to my version. You can see the code changes I made at github.

    Sean

    Sean Wallace
    August 9, 2010 at 6:13 pm

17. Hi, nice work.

    Can I add this checkbox tree to drupal content type.

    Sachin G
    August 10, 2010 at 8:18 am

18. hi
    there is an issue when tree ul element is inside some another list. In this case first checkbox is always checked.
    To fix this I had to add extra ” > ul” in jQuery selector for both cases when defaults.checkParents is true.

    
// Check parents if necessary
if (defaults.checkParents) {
$("input:checked").parents("ul > li").find("input[type='checkbox']:first").attr('checked', true);
}


    I’m sure it may be done smarter way, but I’m not very good in js and jQuery.
    Btw: Thanks for this nice ale lightweight script!

    Artur
    August 12, 2010 at 7:00 pm