Checkbox tree with jQuery

posted in jQuery on January 20, 2011 - 8 Comments

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

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
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.
- written by: mihai on September 13, 2011 at 11:54 am - Reply
  
  The jQuery Live Query plugin ( http://brandonaaron.net/code/livequery/demos ), is a good idea when having elements added dynamically to the DOM,… and because that the event handlers have to be applied to elements were not in the DOM in the first place there are several reasons this is happening ( see this http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_request.3F ).
  
  I hope it helps.
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 :)
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.

thoughts: simple;