theadのチェックボックスがチェックされているが動作していないときにtbodyのチェックボックスをすべてチェックしようとしています

Question

theadのチェックボックスがオンになっていても動作していないときにtbodyのチェックボックスにチェックを入れようとしています。静的値（thead.thead0）は機能していますが、動的値（thead.thead "+ z +"）は機能しません。

ラインチェックする - $("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]")

  for (var z=0; z<dlength; z++) { 
       var thead = "<thead class='thead"+z+"'><tr><th class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></th><th class='center'>"+disarray[z]+"</th></tr></thead>"; 
       $('#add-table').append(thead); 
       alldata.forEach(function(e, i){ 
        if(alldata[i]['section_name'] == disarray[z]){ 
         var tbody = "<tbody class='tbody"+z+"'><tr><td class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></td><td>"+alldata[i]['emp_Fullname']+"</td></tr></tbody>" 
         $('#add-table').append(tbody); 
         console.log(alldata[i]['section_name']); 
        } 
       }); 

       //And for the first simple table, which doesn't have TableTools or dataTables 
       //select/deselect all rows according to table header checkbox 
       var active_class = 'active'; 

       //this part is not working thead.thead"+z+". 

       $("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]").eq(0).on('click', function(){ 
        var th_checked = this.checked;//checkbox inside "TH" table header 

        $(this).closest('table').find("tbody.tbody"+z+" > tr").each(function(){ 
         var row = this; 
         if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true); 
         else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false); 
        }); 
       }); 

       //select/deselect a row when the checkbox is checked/unchecked 
       $('#add-table').on('click', 'td input[type=checkbox]' , function(){ 
        var $row = $(this).closest('tr'); 
        if(this.checked) $row.addClass(active_class); 
        else $row.removeClass(active_class); 
       }); 
      } 

私は静的にこれを試したとき、それは動作します：

   for (var z=0; z<dlength; z++) { 
       var thead = "<thead class='thead"+z+"'><tr><th class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></th><th class='center'>"+disarray[z]+"</th></tr></thead>"; 
       $('#add-table').append(thead); 
       alldata.forEach(function(e, i){ 
        if(alldata[i]['section_name'] == disarray[z]){ 
         var tbody = "<tbody class='tbody"+z+"'><tr><td class='center'><label class='pos-rel'><input type='checkbox' class='ace'><span class='lbl'></span></label></td><td>"+alldata[i]['emp_Fullname']+"</td></tr></tbody>" 
         $('#add-table').append(tbody); 
         console.log(alldata[i]['section_name']); 
        } 
       }); 

       //And for the first simple table, which doesn't have TableTools or dataTables 
       //select/deselect all rows according to table header checkbox 
       var active_class = 'active'; 

       //Here is the change thead.thead0 

       $("#add-table > thead.thead0 > tr > th input[type=checkbox]").eq(0).on('click', function(){ 
        var th_checked = this.checked;//checkbox inside "TH" table header 

        $(this).closest('table').find("tbody.tbody0 > tr").each(function(){ 
         var row = this; 
         if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true); 
         else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false); 
        }); 
       }); 
       console.log(z); 

       //Here is the change thead.thead1 

       $("#add-table > thead.thead1 > tr > th input[type=checkbox]").eq(0).on('click', function(){ 
        var th_checked = this.checked;//checkbox inside "TH" table header 

        $(this).closest('table').find("tbody.tbody1 > tr").each(function(){ 
         var row = this; 
         if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true); 
         else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false); 
        }); 
       }); 

       $("#add-table > thead.thead2 > tr > th input[type=checkbox]").eq(0).on('click', function(){ 
        var th_checked = this.checked;//checkbox inside "TH" table header 

        $(this).closest('table').find("tbody.tbody2 > tr").each(function(){ 
         var row = this; 
         if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true); 
         else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false); 
        }); 
       }); 

       $("#add-table > thead.thead3 > tr > th input[type=checkbox]").eq(0).on('click', function(){ 
        var th_checked = this.checked;//checkbox inside "TH" table header 

        $(this).closest('table').find("tbody.tbody3 > tr").each(function(){ 
         var row = this; 
         if(th_checked) $(row).addClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', true); 
         else $(row).removeClass(active_class).find('input[type=checkbox]').eq(0).prop('checked', false); 
        }); 
       }); 

       //select/deselect a row when the checkbox is checked/unchecked 
       $('#add-table').on('click', 'td input[type=checkbox]' , function(){ 
        var $row = $(this).closest('tr'); 
        if(this.checked) $row.addClass(active_class); 
        else $row.removeClass(active_class); 
       }); 
      } 

Answer 1

まあ、私はそれがここでtable.tbodyとtd、ないthされるべきだと思います。

$("#add-table > thead.thead"+z+" > tr > th input[type=checkbox]") 

$("#add-table > thead.tbody"+z+" > tr > td input[type=checkbox]")