Приращение атрибута идентификатора внутри тега ввода

Question

У меня есть таблица внутри таблицы, где с каждым полем прикреплены контрольные кнопки. Существует три уровня: 1). Выбрать всю информацию 2). Родитель 3). Ребенок

Что я хочу сделать, так это то, что если я выберу кнопку «Выбрать все информацию», он выберет все флажки, которые работают нормально. То, что я не могу сделать, это то, что, если я выберу флажок «Родительский», он должен выбрать все флажки для ребенка. Я пытаюсь увеличить поле Child_id, но не получило каких-либо плодотворных результатов.

Ниже приведен код, я стараюсь, любая помощь или руководство будет полезным

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> 
 
    </script> 
 

 
<script> 
 
    $(function select(){ 
 
\t  $("#Select_All").change(function() { 
 
      $("#Parent_Id, #Child_Id").prop("checked", this.checked); 
 
      }); 
 
    
 
$("#Parent_Id").change(function(){ 
 
     var i=0; 
 
     $('#Child_Id').each(function(){ 
 
     i++; 
 
     var newID='Child_Id'+i; 
 
     $(this).attr('id', newID); 
 
     $(this).val(i); 
 
      $(newID).prop("checked", this.checked); 
 
});});}); 
 
\t </script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<TABLE BORDER="3" CELLPADDING="10" CELLSPACING="10"> 
 
    <input type="checkbox" id = "Select_All" name="Main" />Select All Information 
 
<TD> 
 
    <input type="checkbox" id = "Parent_Id" name="PPP" class = "Parent_Class" />parent 
 

 
<TABLE BORDER="3" CELLPADDING="3" CELLSPACING="3"> 
 
     
 
<div> 
 
    <TD> 
 
<input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" /> Child1 </TD>  
 

 
<TD> 
 
<input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" />Child2</TD> 
 
<TR> 
 
<TD> 
 
<input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" /> Child3</TD> 
 
<TD> <input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" />Child4 
 
</TD> 
 
</TR> 
 
</div> 
 
</TABLE> 
 
</TD> 
 
<TD>  <input type="checkbox" id = "Child_Id" name="CCC" class = "Child_Class" /> 
 
A table inside a table.</TD> 
 
</TABLE>

Answer 1

Попробуйте это:

$("#Select_All").change(function() { 
 
\t $("#Parent_Id, #Child_Id").prop("checked", this.checked); 
 
}); 
 
$("#Parent_Id").change(function(){ 
 
    \t //var i=0; 
 
    var isParentChecked = $(this).prop('checked'); 
 
    \t $('.Child_Class').each(function(){ 
 
     //i++; 
 
     //var newID='#Child_Id'+i; 
 
      //console.log(newID); 
 
     //$(this).attr('id', newID); 
 
     //$(this).val(i); 
 
     \t $(this).prop("checked",isParentChecked); 
 
    \t }); 
 
});

Поскольку вы изменяете идентификатор каждого дочернего элемента, тогда вы проверяете/снимаете флажок с самого верхнего родителя (Select_All), на который будет влиять только «родительский» элемент, поэтому я прокомментирую некоторые строки кода, чтобы он работал правильно.

DEMO