Как снять флажок с родительского флажка, если их дочерний флажок снят с помощью JQuery?

Question

Я использую управление представлением дерева asp.net. И используя Jquery, чтобы выбрать все соответствующие дочерние флажки, когда его родительский флажок установлен. Рабочий Jquery и тонированное HTML находится здесь ... JS Fiddle

Jquery, чтобы выбрать опцию:

$('.tree').on('change', ':checkbox', function() { 
     var checked = this.checked; 
     var $elem = $(this).closest('table'); 
     var depth = $elem.find('div').length; 
     var $childs = $elem.nextAll('table'); 
     $childs.each(function() { 
      var $child = $(this); 
      var d = $child.find('div').length; 
      if (d <= depth) { 
       return false; 
      } 

      $child.find(':checkbox').prop('checked', checked); 
     }); 
    }); 

Но я не знаю, как отменить родительский узел, когда один из его дочернего элемента проверяется , Помощь необходима ..

Answer 1

Это одна из Вейрдест структуры я когда-либо видел, во всяком случае здесь ваше решение http://jsfiddle.net/Gak2h/6/ , если вы хотите, чтобы снять, когда все элементы снят изменение

$this.prop('checked', nbOfCheckeds == 0); 

Answer 2

Вставьте это после того, как $childs.each({...}); (который вы migh хотите переименовать children.each)

 if(!checked){ 
      $elem.prev("table").find(":checkbox:first").prop('checked',false); 
    } 

он проходит вверх по DOM, чтобы найти элемент предшествующей таблицы, является родителем в дереве к текущий узел, а затем находит первый флажок в то, что должно быть родительским флажок

тогда было бы

$('.tree').on('change', ':checkbox', function() { 
    var checked = this.checked; 
    var $elem = $(this).closest('table'); 
    var depth = $elem.find('div').length; 
    var $childs = $elem.nextAll('table'); 
    $childs.each(function() { 
     var $child = $(this); 
     var d = $child.find('div').length; 
     if (d <= depth) { 
      return false; 
     } 

     $child.find(':checkbox').prop('checked', checked); 
    }); 
    if(!checked){ 
      var len = $elem.find("tr:first>td").length; 
      for(; 
       $elem.find("tr:first>td").length=len; 
       $elem = $elem.prev("table")){} 
      $elem.find(":checkbox:first").prop('checked',false); 
    } 
});