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({...});之后插入此内容（您想要重命名为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);
     }
 });

如何在使用jQuery取消选中子复选框时取消选中父复选框？

2 个答案: