jquery tree traversal

Question

I have a task where I need to traverse a tree (checking/un-checking individual items). I've written the code and it works correctly but slow at times. Please help me improve it.

Here is how it is suppose to work:

Un-checking the parent unchecks all children of that parent
Un-checking the (one or more) child nodes un-checks the parent
Checking the parent automatically checks all it's children
When all children are checked the parent gets checked as well automatically
- this should also work with any depth tree..so if there are 3 level deep nodes unchecking the most inner child will uncheck the First parent of each node.

Few other considerations: Css classes:

"checked" - black color font, when removed font is gray
"marked" - gray background

So:

When the parent has NO children selected, it's css class "checked" is removed (it becomes gray)
When an item is un-checked it's css classes "checked" and "marked" are removed (black font becomes gray and without gray background)
When ALL children are un-checked the parent's "marked" class is removed (gray background is removed).

I hope this illustration will help: enter image description here

And part of HTML source code:

                        Aparatura elektryczna, elektroenergetyka   

                        Silniki, napędy, automatyka napędów 
                        Silniki i napędy przemysłowe 
                        Prądu stałego   
                        Prądu przemiennego 
                        synchroniczne   
                        asynchroniczne 

                        Silniki krokowe   
                        Siłowniki elektryczne   
                        Liniowe 
                        Obrotowe 
                        Serwosilniki, serwonapędy 
                        Inne 

                        Układy zabezpieczeń silników   
                        Elektroniczne układy sterowania napędów   
                        Przemienniki prądu stałego   
                        Przemienniki częstotliwości (falowniki)   
                        Układy łagodnego rozruchu (softstarty)   

                        Sterowniki silników DC 
                        Sterowniki silników krokowych 
                        Jednoosiowe   
                        Wieloosiowe   
                        Wieloosiowe z interpolacją

...

And my script:

mekwall · Accepted Answer

I won't be adding all the functionality to this answer since you'll learn more by implementing them yourself. But I made a test case on jsFiddle that works as illustrated:

$(".option-tree > li > label > input:checkbox").each(function(){
    var $this = $(this),
        options = $this.closest("li").find("> ul > li > label > input:checkbox");

    $this.change(function(){
        options.prop("checked", $this[0].checked);
    });

    options.change(function(){
        var  all = options.length,
           checked = options.filter(":checked").length;
        $this[0].checked = all === checked;
    });

});

Note that the above example is using jQuery 1.6 where you have to use .prop instead of .attr and .removeAttr.

For earlier versions of jQuery (pre 1.6) it would look like this:

$(".option-tree > li > label > input:checkbox").each(function(){
    var $this = $(this),
        options = $this.closest("li").find("> ul > li > label > input:checkbox");

    $this.change(function(){
        if ($this[0].checked) {
            options.attr("checked", "checked");
        } else {
            options.removeAttr("checked");
        }
    });

    options.change(function(){
        var  all = options.length,
           checked = options.filter(":checked").length;
        $this[0].checked = all === checked;
    });

});

jquery tree traversal

Answers (1)

Related Questions