Checkbox tree with jQuery

Update:

With nothing to do, I remembered the failure with the checkbox tree, and I started re-thinking it. With nothing else on my mind, took me very short time to figure my mistakes; …so now i will update this post and the demo. Of course my opinion about checkboxtree jQuery plugin remains the same, but if you don’t want to use an entire plugin, then you can always use the code here.


Sometime ago I needed an “checkbox tree” ( a nested list with checkboxes in every node ), for options that have sub-options. I decided to write one of my own.

After some try & error, I come up with the following code :

Below is the new improved and corrected code.


(function($){

$('ul#checkboxes input[type="checkbox"]').each (
 function () {
  $(this).bind('click change', function (){
   if($(this).is(':checked')) {
    $(this).siblings('ul').find('input[type="checkbox"]').attr('checked', 'checked');
    $(this).parents('ul').siblings('input[type="checkbox"]').attr('checked', 'checked');
   } else {
    $(this).siblings('ul').find('input[type="checkbox"]').removeAttr('checked', 'checked');
   }
  });
 }
);

})(jQuery);

you can see it in action here. (updated demo, with the new code).

I also found this checkboxtree jQuery plugin . I gave it a try, and worked perfectly, and you just have to write:

$('ul#checkboxes').checkboxTree({ });

and you will have a checkboxtree. This plugin has a lot of options, that you will find on the plugin homepage.

I made a simple demo using the plugin, that you can see it here, but you can see a lot more here.

Comments

  1. written by: Tim on September 12, 2011 at 6:31 pm - Reply

    Hi Mihai,

    Did you already use this code in ajax/json context because I have some trouble to use it in such context. The checkboxes load in json have bugs when I click on and do not check all parents and children I want…

    Thanks for you response,
    Tim

    • written by: mihai on September 12, 2011 at 8:31 pm - Reply

      Hi Tim,

      I am sorry I can’t give you a definite answer, because I haven’t used it in this context, … but I think that your problem is happening mainly because when the HTML is loaded with AJAX, the code for the checkboxes ( the JS ) can’t browse correctly the DOM order, which is the base for this to work.

      Are you sure you used the updated code and not the old one buggy one ? and did you tried the checkboxtree plugin ?

      Thanks for your comment, and question, i will make some tests, hopefully i may find a solution.
      Mihai

  2. written by: Tim on September 13, 2011 at 10:32 am - Reply

    Thank you for your fast answer.

    Effectively I think that’s a DOM problem. Do you have some technics to be sure I’m using the last DOM order? The DOM order which corresponds to all checkboxes displayed on my page.

  3. written by: Tim on September 19, 2011 at 6:21 pm - Reply

    Finally I changed my strategy. I’m using Dynatree : http://code.google.com/p/dynatree/. The advantage it takes comparing checkboxtree is the ajax option. It apparently really works well…

    • written by: mihai on September 19, 2011 at 6:27 pm - Reply

      Thanks for the info Tim, … i didn’t know about this plugin… now i know :)

  4. written by: vikas on July 11, 2012 at 9:32 am - Reply

    Hello ,
    Can anybody tell me how can I get checkboxtree values at server side.

    • written by: mihai on August 27, 2012 at 6:10 pm - Reply

      Sorry, i don’t know…
      but i think they need to be in a form, and that form needs to be submitted.

Leave a Reply to Tim Cancel reply

Your email address will not be published. Required fields are marked *

× 6 = 42

This site uses Akismet to reduce spam. Learn how your comment data is processed.