title: jquery tree traversal
body: <p>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.</p>
  
  <p>Here is how it is suppose to work:</p>
  
  <ol>
  <li>Un-checking the parent unchecks
  all children of that parent</li>
  <li>Un-checking the (one or more)
  child nodes un-checks the parent</li>
  <li>Checking the parent automatically
  checks all it's children</li>
  <li>When all children are checked the
  parent gets checked as well
  automatically
  
  <ul>
  <li>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.</li>
  </ul></li>
  </ol>
  
  <p>Few other considerations: 
  Css classes:</p>
  
  <ul>
  <li>"checked" - black color font, when removed font is gray</li>
  <li>"marked" - gray background</li>
  </ul>
  
  <p>So:</p>
  
  <ul>
  <li>When the parent has NO children selected, it's css class "checked" is removed (it becomes gray)</li>
  <li>When an item is un-checked it's css classes "checked" and "marked" are removed (black font becomes gray and without gray background)</li>
  <li>When ALL children are un-checked the parent's "marked" class is removed (gray background is removed).</li>
  </ul>
  
  <p>I hope this illustration will help:
  <img src="https://i.stack.imgur.com/y8T5w.png" alt="enter image description here"></p>
  
  <p>And part of HTML source code:</p>
  
  <pre><code>&lt;ul class='treeList2b'&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:30px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Aparatura elektryczna, elektroenergetyka   &lt;/span&gt;&lt;/div&gt;
  
  &lt;ul class='treeList2b'&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:60px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Silniki, napędy, automatyka napęd&amp;#243;w &lt;/span&gt;&lt;/div&gt;
  &lt;ul class='treeList2b'&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:90px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Silniki i napędy przemysłowe &lt;/span&gt;&lt;/div&gt;
  &lt;ul class='treeList2b'&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Prądu stałego   &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Prądu przemiennego &lt;/span&gt;&lt;/div&gt;
  &lt;ul class='treeList2b'&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:150px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;synchroniczne   &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:150px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;asynchroniczne &lt;/span&gt;&lt;/div&gt;
  
  &lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Silniki krokowe   &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Siłowniki elektryczne   &lt;/span&gt;&lt;/div&gt;
  &lt;ul class='treeList2b'&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:150px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Liniowe &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:150px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Obrotowe &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Serwosilniki, serwonapędy &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Inne &lt;/span&gt;&lt;/div&gt;
  
  &lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:90px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Układy zabezpieczeń silnik&amp;#243;w   &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:90px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Elektroniczne układy sterowania napęd&amp;#243;w   &lt;/span&gt;&lt;/div&gt;
  &lt;ul class='treeList2b'&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Przemienniki prądu stałego   &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Przemienniki częstotliwości (falowniki)   &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Układy łagodnego rozruchu (softstarty)   &lt;/span&gt;&lt;/div&gt;
  
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Sterowniki silnik&amp;#243;w DC &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:120px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Sterowniki silnik&amp;#243;w krokowych &lt;/span&gt;&lt;/div&gt;
  &lt;ul class='treeList2b'&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:150px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Jednoosiowe   &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:150px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Wieloosiowe   &lt;/span&gt;&lt;/div&gt;
  &lt;/li&gt;&lt;li class='open'&gt;                        &lt;div class="tlWrap clearfix marked checked" style="padding-left:150px;"&gt;&lt;input type="checkbox" checked="checked" class="checkbox" name="SelectedBranch" id="SelectedBranch"&gt;&lt;span&gt;Wieloosiowe z interpolacją   &lt;/span&gt;&lt;/div&gt;
  
  &lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;
  </code></pre>
  
  <p>...</p>
  
  <p>And my script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  /*&lt;![CDATA[*/
      $(function(){           
          $('ul.treeList2b .checkbox').click(function(e){
              e.stopPropagation();
              var obj = $(this).closest('li').find(':checkbox'); 
              obj.attr('checked', this.checked);
              var childCnt=obj.size();  // get childrent count - when parent was clicked
              var checkedCnt=obj.filter(':checked').length; // out of those get those that are checked
              if (childCnt==checkedCnt){
                  obj.parents('li').each(function (index, element) {
                      var objSub = $(element).find('li');
                      childCnt = objSub.size();
                      checkedCnt = objSub.find(':checkbox:checked').length;
                      if (childCnt==checkedCnt) { 
                          $(element).find(':checkbox:first').attr("checked", true);
                          $(element).children('div.tlWrap').addClass('checked');
                      }
                      $(element).children('div.tlWrap').addClass('marked');
                  });
              }else{ 
                  var objParent = obj.parents('li').find(':checkbox:first');
                  objParent.attr("checked", false);
                  objParent.parent('div.tlWrap').removeClass('checked');
              }
              refleshCheckbox(this);
          });
      });
      function refleshCheckbox(obj){
          if(!$(obj).attr('checked')){
              $(obj).closest('li').find('div.tlWrap').removeClass('marked');
          } 
          if ($(obj).closest('ul').find(':checkbox:checked').length==0){
              $(obj).closest('ul').parent().find('div.tlWrap').removeClass('marked');
          }
      }
  /*]]&gt;*/
  &lt;/script&gt;
  </code></pre>