JavaScript复选框树-自动选中子级

Question

乡亲们！

我有一个小问题，就是这种情况： 树状视图

我让树根据“ lvl”创建。 也就是说，Bereich ABC是lvl1，Test1.docx是lvl4，依此类推。 这是一棵“假”树。 但是我只是每个对象的lvl信息。 我必须选中复选框，如果单击了父级。 这意味着，如果单击了lvl3（例如“ Originale”），则还必须检查lvl4和lvl5。

你明白我的意思吗？ 希望如此。 但是我不能使它工作。 你有什么想法？

 $('[class^=lvl]').click(function(){ var keepChecking = true; var currentElement = $(this); var clickedLevel = getLevel(currentElement); var checkValue = currentElement.is(':checked'); while (keepChecking) { currentElement.attr('checked' , checkValue); // get next element currentElement = getNextCheckbox(currentElement); var currentLevel = getLevel(currentElement); keepChecking = (currentLevel > clickedLevel); } }); function getNextCheckbox(checkbox) { return checkbox.parent().parent().next().children(":first").children(":first"); } function getLevel(checkbox) { var currentClass = checkbox.attr('class'); var currentLvl = currentClass.substring(3, currentClass.length); return parseInt(currentLvl); } 

  <TD class="center"> <INPUT TYPE="checkbox" NAME="" class="lvl[LL_REPTAG=PFADLEVEL /] docCheck" VALUE="[LL_REPTAG=DataId /]"> </TD> 

Answer 1

我将您的JavaScript代码更改为此：

function getNextCheckbox(checkbox) {
  return checkbox.parent().parent().next().children(":first").children(":first");
}

function getLevel(checkbox) {
  var currentClass = checkbox.attr('class');
  if (currentClass){
    var currentLvl = currentClass.substring(3, currentClass.length);
    return parseInt(currentLvl);
  }else{
    return false;
  }    
}

$('[class^=lvl]').click(function(){
    var currentElement = $(this);
    var clickedLevel = getLevel(currentElement);
    var checkValue = currentElement.is(':checked');
    nextElement = getNextCheckbox(currentElement);        
    while ( getLevel(nextElement)>clickedLevel) {
       currentElement=nextElement;
       currentElement.prop('checked' , checkValue);
       nextElement = getNextCheckbox(currentElement);
    }
});

您也可以在这里使用它： https : //jsfiddle.net/1r73vy7z/1/

请享用 ：）