interacting with checkboxes in a php while loop

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>

Louys Patrice Bessette · Accepted Answer · 2016-12-31 18:49:13Z

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

});

edited Dec 31, 2016 at 18:49

answered Dec 31, 2016 at 18:42

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

steven Over a year ago

Thank you so much for your help! This is the solution that I was looking for :) It now works.

Collectives™ on Stack Overflow

interacting with checkboxes in a php while loop

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related