Вложенная таблица checkbox check/Uncheck

Question

У меня есть страница со вложенной таблицей и флажок для проверки всей ячейки таблицы <td>. И флажок для каждой ячейки таблицы <td> для проверки соответствующей ячейки.

То, что я пытаюсь сделать, это

1. CheckAll Флажок проверки/снимите все родителя и ребенок флажок
2. Снимите отметку родителя флажок неустановленными CheckALL флажок и убирает все ребенок checkbox
3. Проверить родительского флажок проверяет все ребенок флажка и узнает, если все другие родительского флажок проверяется или нет, чтобы проверить CheckALL флажок
4. проверки ребенка флажка следует проверить соответствующий родителя
5. убрав с ребенка флажок следует проверить, если братья проверяются, если не проверено родитель checbox должны получить бесконтрольно и если checkALL checkbox проверяется, он также должен быть снят.

Я не могу этого сделать.

Вот что я пробовал.

HTML:

<table class="table table-striped tablesorter"> 
    <thead> 
    <tr colspan="2"> 
     <th> 
     <input type="checkbox" id="checkedAll"> 
     </th> 
     <th>Check/UnCheck ALL Boxes</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <input type="checkbox" class="checkParent"> 
     </td> 
     <td>1KWT</td> 

    </tr> 
    <tr> 
     <td colspan="2" style="padding: 0"> 
     <table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0"> 
      <thead> 
      <tr> 
       <th></th> 
       <th>Sub</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td> 
       <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td> 
       <td>1KWT1</td> 
      </tr> 
      <tr> 
       <td> 
       <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td> 
       <td>1KWT2</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <input type="checkbox" class="checkParent" style="margin-top: -3px"> </td> 
     <td>1OMN</td> 
    </tr> 
    <tr> 
     <td colspan="2" style="padding: 0"> 
     <table class="innertable" style="margin: 10px 0px 10px 50px;border: 1px solid #d0d0d0"> 
      <thead> 
      <tr> 
      <th></th> 
       <th>Sub</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td> 
       <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td> 
       <td>1OMN1</td> 
      </tr> 
      <tr> 
       <td> 
       <input type="checkbox" class="checkChild" style="margin-top: -3px"> </td> 
       <td>1OMN2</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 

сценарий:

$(document).ready(function() { 

    $("#checkedAll").change(function(){ 
    if(this.checked){ 
     $(".checkParent, .checkChild").each(function(){ 
     this.checked=true; 
     });    
    }else{ 
     $(".checkParent, .checkChild").each(function(){ 
     this.checked=false; 
     });    
    } 
    }); 

    $(".checkParent").click(function() { 
    if ($(this).is(":checked")){ 
     var isAllChecked = 0; 
     $(".checkParent").each(function(){ 
     if(!this.checked) 
      isAllChecked = 1; 
     }) 
     $(".checkChild").prop("checked", true); 
     if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }  
    }else { 
     $("#checkedAll, .checkChild").prop("checked", false); 

    } 
    }); 

    $(".checkChild").click(function() { 
    if ($(this).is(":checked")){ 
    $(".checkParent").prop("checked", true); 

    }else { 
     $(".checkParent").prop("checked", false); 

    } 
    }); 


}); 

ссылка поиграться https://jsfiddle.net/4zhhpwva/

Answer 1

Я сделал это. Усовершенствования приветствуются.Вот обновленный скрипт

$(document).ready(function() { 

    $("#checkedAll").change(function() { 
    if (this.checked) { 
     $(".checkParent, .checkChild").each(function() { 
     this.checked = true; 
     }); 
    } else { 
     $(".checkParent, .checkChild").each(function() { 
     this.checked = false; 
     }); 
    } 
    }); 

    $(".checkParent").click(function() { 
    if ($(this).is(":checked")) { 
     var isAllChecked = 0; 
     $(".checkParent").each(function() { 
     if (!this.checked) 
      isAllChecked = 1; 
     }) 
     $(this).closest("tr").next("tr").find(".checkChild").prop("checked", true); 
     if (isAllChecked == 0) { 
     $("#checkedAll").prop("checked", true); 
     } 
    } else { 
     $("#checkedAll").prop("checked", false); 
     $(this).closest("tr").next("tr").find(".checkChild").prop("checked", false); 
    } 
    }); 

    $(".checkChild").click(function() { 
    if ($(this).is(":checked")) { 

     var isChildChecked = 0; 
     $(".checkChild").each(function() { 
     if (!this.checked) 
      isChildChecked = 1; 
     }); 
     if (isChildChecked == 0) { 
     $("#checkedAll").prop("checked", true); 
     } 
     $(this).closest("table").closest("tr").prev("tr").find(".checkParent").prop("checked", true); 

    } else { 
     var isAllSiblingChecked = 0; 
     $(this).closest("tr").nextAll("tr").find(".checkChild").each(function() { 
     if ($(this).is(":checked")) 
      isAllSiblingChecked = 1; 
     }); 

     $(this).closest("tr").prev("tr").find(".checkChild").each(function() { 
     if ($(this).is(":checked")) 
      isAllSiblingChecked = 1; 
     }); 

     if (isAllSiblingChecked == 0) { 
     $(this).closest("table").closest("tr").prev("tr").find(".checkParent").prop("checked", false); 
     } 
     $("#checkedAll").prop("checked", false); 
    } 
    }); 

}); 

Я обновил скрипку здесь, чтобы увидеть рабочий https://jsfiddle.net/shumaise/4zhhpwva/10/

Answer 2

Ваш вопрос о том, что селекторы у вас есть в месте всегда получать ВСЕ checkchildren и ВСЕ checkParents вместо просто вложенные. Вам нужно сделать это более конкретным.

Там, безусловно, лучший способ сделать это, но в качестве примера, чтобы показать, что я имею в виду, на функцию checkParent щелчка, вместо $(".checkChild"), который будет захватывать все checkChildren на странице, вы, вероятно, хотите сделать что-то вроде $(this).closest("tr").next("tr").find(".checkChild")

Это означает, что если вы измените свою разметку так, чтобы они были вложены под общим предком, который не используется совместно с любыми другими элементами checkChild, это может быть упрощено, так что .next не понадобится.

Я обновил свою скрипку здесь - https://jsfiddle.net/4zhhpwva/3/, так что вы можете увидеть, что работает ...