1

我正在使用 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);
         });
     });

但是我不知道如何在检查其子项之一时取消选择父节点。

4

2 回答 2

0

$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);
     }
 });
于 2013-06-19T07:04:02.727 回答
0

这是我见过的最奇怪的结构之一，无论如何这里是你的解决方案 http://jsfiddle.net/Gak2h/6/ 如果你想取消选中所有元素何时未选中更改

$this.prop('checked', nbOfCheckeds == 0);
于 2013-06-18T15:22:32.157 回答