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() {});

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

2 个答案: