在php while循环中与复选框进行交互

Question

在我的待办事项列表复选框中显示来自php while循环的问题。当我检查其中的一个时，我的JQuery似乎将css类添加到所有的复选框。

PHP函数：

function get_tasks(){ 
    $query = query("SELECT * FROM tasks"); 

    confirm($query); 

    while($row = fetch_array($query)){ 

     $task_name = $row['task_name']; 
     $task_id = $row['task_id']; 
     $task_desc =$row['task_description']; 
     $date_created = $row['date_created']; 

     $tasks = <<<DELIMETER 

     <tr> 
     <td><input type="checkbox" class="checkBoxes" name="checkBoxArray" value="{$task_id}"> </td> 
     <td> <span class="task_name">{$task_name}</span> </td> 
     <td> {$task_desc} </td> 
     <td> {$date_created} </td> 
     <td> <a href='javascript:void(0)' id="delete" class='btn btn-danger delete_link' rel='{$task_id}' ><span class='glyphicon glyphicon-remove'></span></a></td> </td> 

     </tr> 


DELIMETER; 

echo $tasks; 


    } 



} 

jQuery代码与复选框进行交互。

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

<script> 
     $(document).ready(function(){ 

     $('input:checkbox').change(function(){ 

      if($(this).is(":checked")){ 

       $('.task_name').addClass("completed"); //adds strike through to show task is completed. 
       $('.delete_link').show(); 

      } else{ 

       $('.task_name').removeClass("completed"); 
       $('.delete_link').hide(); 



      } 

     }); 

    }); 

    </script> 

Answer 1

我明白，你只需要添加/删除类和显示/隐藏删除链接属于同一行点击复选框中......

$(document).ready(function(){ 

    $('input:checkbox').change(function(){ 

     // Find the "parent tr" of the checkbox 
     var parentTr = $(this).closest("tr"); 

     if($(this).is(":checked")){ 

      // find the elements to apply a change within the "parent tr" 
      parentTr.find('.task_name').addClass("completed"); //adds strike through to show task is completed. 
      parentTr.find('.delete_link').show(); 

     }else{ 

      // find the elements to apply a change within the "parent tr" 
      parentTr.find('.task_name').removeClass("completed"); 
      parentTr.find('.delete_link').hide(); 
     } 
    }); 

});