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

Question

Having an issue with my to do list check boxes that are displayed from a php while loop. My JQuery seems to add css class to all my check boxes when i check one of them.

Php function:

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 code to interact with the check boxes.

<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

I understand that you only want to add/remove class and show/hide the delete link that are in the same row as the clicked checkbox...

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

});