«

jQuery Checkbox Tree Plugin – New and Improved

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:

Option Description
collapsedarrow

(default: "img-arrow-collapsed.gif")

The path to the image used to indicate a collapsed row.

 
expandedarrow

(default: "img-arrow-expanded.gif ")

The path to the image used to indicate an expanded row.

 
blankarrow

(default: "img-arrow-blank.gif")

The path to the image used when there are no child checkboxes.

 
activeClass

(default: "checkboxtreeactive")

The class added to the ul when the plugin has been successfully used.

 
hoverClass

(default: "over")

The class added to the label on hover for ie6. (only added in ie6)

 
checkchildren

(default: false)

If set to false the child checkboxes of the one you select will not be checked. If set to true, child checkboxes will be checked.

 
checkparents

(default: true)

If set to true, all parents of a checked checkbox will be checked.

 
collapsed

(default: true)

This dictates whether or not the tree will be collapsed or expanded on initial load.

 
hidecbwithjs

(default: false)

If this is set to false you will need to hide the checkboxes with css. If true the checkboxes will be hid by the plugin.

 
checkedClass

(default: "checked")

This is the class used on the label when a checkbox is in checked state.

This entry was posted on Wednesday, July 1st, 2009 at 12:24 am and is filed under jquery, jquery plugins. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

24 Responses to “jQuery Checkbox Tree Plugin – New and Improved”

  1. gzashh Says:
    July 1st, 2009 at 11:47 am

    I want to have a copy

  2. Matt Wood Says:
    July 1st, 2009 at 12:42 pm

    You can get a copy at the repository linked above – http://github.com/magearwhig/jquery-checkboxtree

    You can also get all the images and css from the demo.

  3. Jonathan Says:
    July 18th, 2009 at 3:06 pm

    Yo. I used the version here:

    But to have it select certain items upon init you can add something like this:

    $(‘li.checked’).each( function() {
    $(this).find(‘div.checkbox’).click();
    });

    Then when you output in PHP or something add:

    class=”checked”

    to your list item. It should toggle all parents and whatnot.

    Laterz.

  4. Matt Wood Says:
    July 18th, 2009 at 8:32 pm

    Jonathan, There is no need to do that, if you just add checked=”checked” to the checkboxes that should be selected, everything will be taken care of. The script already looks for checkboxes that are already checked onload.

  5. Greg Ecklund Says:
    July 24th, 2009 at 7:43 am

    Awesome stuff thanks for this!

    I did modify a line of code to fit a need I had which was to collapse everything but those that had a checked child. Might be useful to add an option for it.

    (top line here)
    if(settings.collapsed && !(jQuery(“ul li input:checked”,$this).length)){
    $this.find(“ul”).hide();
    $collapseImage = jQuery(”)
    $collapseImage.data(“collapsedstate”,0)
    }else{
    $collapseImage = jQuery(”)
    $collapseImage.data(“collapsedstate”,1)
    }

  6. David J. Says:
    September 16th, 2009 at 1:30 am

    Nice plugin. I think I will use it for my project, the only point I don’t like is that you are using images to replace the checkbox, and so the checkbox aren’t style like any other checkbox in my forms. And that’s a problem for me as, I use changing form theme styling.

    I think I will try to adapt your work to keep the default checkbox. But before doing it, can you tell me why dit you choose this way? Did you find any difficulties to keep the original checkbox?

  7. Matt Says:
    September 16th, 2009 at 6:55 am

    Hi David, Used images so that the checkbox could have more than two states. We wanted to be able to show that a checkbox had checked children but was not checked itself. You should be able to not hid the checkboxes easily. In the configuration keep hidecbwithjs set to false and don’t hide the checkboxes with css.

  8. Serena Says:
    October 1st, 2009 at 11:04 am

    I am using this plugin for my project. Just got one question, when I use this
    $(‘#checkbox_id’).click(funcion{
    // my code here…
    })
    the function is never called. I need a event listener for the checkbox check and uncheck event. Do you have an easy way to do it?

  9. Alfredo Rico Says:
    October 2nd, 2009 at 1:11 pm

    Greetings from Venezuela.. :-)

    I’m a Rails developer working on a huge Rails project and definitely I’ll use your excellent plugin. Thanks a lot.
    Just one question, I need to create a tree made by just radiobuttons (allowing to select just one option). Please tell me please tell me what should change in your plugin.

    Thanks in advance..

  10. Michele Says:
    October 7th, 2009 at 11:18 am

    Your Repository contains 2 different(!) versions of “jquery.checkboxtree.js” in the zip to download … I just checked that you removed some uncommented lines, but two versions with diffrent sizes are… confusing at first! :)

  11. Anirban Roy Says:
    October 9th, 2009 at 4:42 am

    Can you please add the toggle functionality.
    I need to add Tow link ‘Collapse’ and ‘Expand’ to collapse and expand the respectably.

    Please give the Example code based on this plugin.

    Thanks
    Anirban

  12. Lewis Says:
    November 11th, 2009 at 4:25 pm

    You might want to checkout this plugin :

    http://www.redcarrot.co.uk/2009/11/11/collapsible-checkbox-tree-jquery-plugin/

  13. Stefan Says:
    November 24th, 2009 at 1:44 am

    Hello,
    Nice plugin. I’d like to use it in one of my projects. What is the license behind it?

    Thanks
    Stefan

  14. Matt Wood Says:
    November 24th, 2009 at 9:22 am

    Stefan, Feel free to use it however you like.

  15. Roberto Linares Says:
    December 11th, 2009 at 4:49 pm

    Great plugin!

    It’s being very useful for me!

    I’m still new to jQuery but I’m trying to implement the “expand all/collapse all” functionality. It seems like I can’t only do the $(“ul”).hide() and change the images from expanded to collapsed because the control stores some information about the expanded/collapsed state and I don’t know how to acess this stored information in order to modify it.

    Any idea? I will appreciate it a lot.

    Thanks.

  16. Roberto Linares Says:
    December 21st, 2009 at 8:59 am

    I just wanted to mention that I could solve my ‘collapse all’ problem by just firing the click() event of the visible ’s used to represent the collapse/expand buttons like if they were clicked by the user. Now I just have to check if the images are in a visible because if not, they are already collapsed.

  17. Bookmarks for January 2nd from 02:58 to 02:58 | Buddy's Blog Says:
    January 2nd, 2010 at 2:02 am

    [...] floatmargin.com » Blog Archive » jQuery Checkbox Tree Plugin – New and Improved – very cool tree selector Share and Enjoy: [...]

  18. Roberto Linares Says:
    January 25th, 2010 at 4:45 pm

    I have another question.

    What if I need to add more ul>li>labels to one of the branches of the tree?

    Obviously they won’t get automatically activated with the plugin, so I tried to do the .activateCheckboxTree() specifically for the new branch that I add but some of the events doesn’t seem to work.

    Any idea of how can I add new sub-branches and activate the checkboxTree on them?

  19. Utkarsh Says:
    January 28th, 2010 at 4:26 am

    How to get the checked checkbox values?

  20. Bjorn Says:
    February 12th, 2010 at 12:12 am

    I’m not able to display the checkedchildren icon, when a child is checked but its parent is not? How to enable this icon?

  21. DT Says:
    February 19th, 2010 at 7:56 am

    I notice in the commented out section of your demo that it refers to tri-state checkboxes.
    Is there an option within we can set to use this?
    Thanks

  22. vodo Says:
    February 28th, 2010 at 4:53 am

    how to insert in Drupal 6 and sow in Views. any ideas?

  23. Mike Says:
    March 1st, 2010 at 9:54 am

    Is is possible to display with the parent that only some of the children have been checked? Right now if checkparents is set it will display a checkbox with the parent if one of the children is checked. This could be confusing as it looks like all of the children are checked when you only see the parent item. Instead of a check, using a dash or something like that would be better.

  24. BasilBear Says:
    March 9th, 2010 at 6:09 am

    Thanks for this plugin. It took me a little while to realise that I needed the css file and images too (doh!).

    But it’s just what I needed!

    BasilBear

Leave a Reply