當使用jQuery取消選中子復選框時，如何取消選中父復選框？

Question

我正在使用asp.net樹視圖控件。 並在選中其父級時使用jQuery選中所有相應的子級復選框。 可用的jQuery和呈現的HTML在此JS小提琴中

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({...}); （您可能想重命名為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);
     }
 });