选择/取消选择不在动态表格行中的所有复选框

Question

用下面的代码我只是想选择/取消选择表格行中的所有复选框，通常这个jquery代码在静态表格中工作正常，但不能在动态表格中工作用foreach生成。我真的没有发现我实际上错过了什么，因为我是新来的。

的jQuery：

$('#chkall').click(function(event) { //on click 
       if(this.checked) { // check select status 
        $('.TID').each(function() { //loop through each checkbox 
         this.checked = true; //select all checkboxes with class "checkbox1"    
        }); 
       }else{ 
        $('.TID').each(function() { //loop through each checkbox 
         this.checked = false; //deselect all checkboxes with class "checkbox1"      
        });   
       } 
      }); 

查看网页：

<form role="form" action="<?php echo base_url(); ?>attendance/statusUpdate/" method="post" name="attendance" id="attendance"> 
      <table class='table table-condensed table-bordered table-hover text-center' cellspacing='0' cellpadding='0' width='100%' id='tabledata'> 
       <thead> 
        <tr class='info'> 
         <th class="text-center">Sl#</th> 
         <th class="text-center">Trainee ID</th> 
         <th class="text-center">Trainee Name</th> 
         <th class="text-center">Date</th> 
         <th class="text-center">In Time</th> 
         <th class="text-center">Out Time</th> 
         <th class="text-center">Status</th> 
         <th class="text-center">Withdraw</th> 
         <?php 
         if (isset($userinfo) and ($userinfo->Role == 1)) { 
         ?> 
         <th class="text-center">Allow <input type='checkbox' name='chkall' id='chkall'></th> 
         <th class="text-center">Remarks</th> 
         <?php 
         } 
         ?> 
        </tr> 
       </thead> 
       <tbody> 
        <tr> 
         <td colspan="10">Session # </td> 
        </tr> 
        <tr> 
         <td>Faculty:</td> 
         <td colspan="2"> </td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <td></td> 
         <?php 
         if (isset($userinfo) and ($userinfo->Role == 1)) { 
         ?> 
         <td></td> 
         <td></td> 
         <?php 
         } 
         ?> 
        </tr> 
       <?php 
       $i = 0; 
       foreach($attendance as $row){ 
        $i++; 
        if ($row->Status=='Late-In' or $row->attnDate == null) { 
         $style='red'; 
        }else{ 
         $style='black'; 
        } 
       ?> 
        <tr style="color:<?php echo $style?>"><td><?=$i?></td> 
         <td><?=str_pad($row->TraineeID, 7, "0", STR_PAD_LEFT)?></td> 
         <td class="text-left"><?=$row->Name?></td> 
         <td><?=$row->attnDate?></td> 
         <td><?=$row->inTime?></td> 
         <td><?=$row->outTime?></td> 
         <td><?=$row->Status?></td> 
         <td><?=$row->Reason?></td> 
         <?php 
         if (isset($userinfo) and ($userinfo->Role == 1)) { 
         ?> 
         <td> 
          <input type='checkbox' name='TraineeID[]' class="TID" id="TID" value="<?=$row->TraineeID ?>" 
          <?php if($row->Status==='Late-In') 
           { 
          ?> 
           unchecked> 
          <?php 
           }else if($row->Status==='Present'){ 
          ?> 
           checked> 
          <?php 
           } 
          ?> 
         </td> 
         <td> 
          <input type="text" name="remarks[]" id="remarks"> 
         </td> 
         <?php 
         } 
         ?> 
       <?php 
       } 
       ?> 
        </tr> 
       </tbody> 
    <?php   
    } 
    ?> 
      </table> 
     </form> 

Answer 1

$('#chkall').click(function(event) { //on click 
    if(this.checked) { // check select status 
      $('#tabledata .TID').each(function() { //loop through each checkbox 
       this.checked = true; //select all checkboxes with class "checkbox1"    
      }); 
    }else{ 
      $('#tabledata .TID').each(function() { //loop through each checkbox 
       this.checked = false; //deselect all checkboxes with class "checkbox1"      
      });   
    } 
}); 

我认为你需要将事件绑定到静态对象的页面，例如：#tabledata

Answer 2

尝试$("input.TID").prop('checked', true);和$("input.TID").prop('checked', false);

删除

$('#tabledata .TID').each(function() {});