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

});

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

1 个答案: