如何用Ajax+PHP&MySQL实现复选框勾选时待办项添加删除线？

核心问题梳理 #

1. 事件绑定失效：HTML复选框未包含JS选择器指定的checkbox-todo类，导致点击事件无法触发
2. Ajax逻辑不完整：仅处理复选框勾选场景，未覆盖取消勾选操作；未传递真实任务ID与勾选状态
3. 后端逻辑错误：未执行数据库更新操作，且Ajax请求中header跳转无效（异步请求不会触发页面刷新）

分步修复代码 #

1. 修正HTML复选框（添加目标类）

<input class="form-check-input form-check-input-todolist flex-shrink-0 my-1 me-2 form-check-input-undefined checkbox-todo" 
       type="checkbox" 
       data-event-propagation-prevent="data-event-propagation-prevent" 
       id="checkbox-todo-<?= $todoTask_Data['task_id'] ?>" 
       <?= $todoTask_Data['task_checked'] == 'true' ? 'checked' : '' ?> />

关键：在class中加入checkbox-todo，确保JS能选中元素

2. 完善Ajax逻辑（覆盖全状态+传递有效参数）

$(document).ready(function() {
    $('.checkbox-todo').on('change', function() {
        // 从ID中提取真实任务ID（格式：checkbox-todo-xxx）
        const taskId = $(this).attr('id').split('-')[2];
        const isChecked = this.checked;

        $.ajax({
            url: "update_TodoTask.php",
            method: "POST",
            data: { 
                task_id: taskId,
                task_checked: isChecked ? 'true' : 'false'
            },
            dataType: 'json',
            success: function(response) {
                if (response.success) {
                    // 切换待办项文本的删除线（假设文本容器有todo-text类）
                    $(`#checkbox-todo-${taskId}`).closest('.todo-item').find('.todo-text').toggleClass('text-decoration-line-through', isChecked);
                } else {
                    console.error('更新失败:', response.message);
                    // 更新失败时恢复复选框状态
                    $(this).prop('checked', !isChecked);
                }
            },
            error: function(xhr, status, error) {
                console.error('请求出错:', error);
                $(this).prop('checked', !isChecked);
            }
        });
    });
});

关键：取消勾选时也发送请求，传递任务ID和勾选状态；前端根据响应结果更新UI

3. 修正后端PHP（执行数据库更新+返回JSON响应）

<?php
// 替换为你的数据库连接逻辑（示例用PDO）
$pdo = new PDO("mysql:host=localhost;dbname=你的数据库名", "用户名", "密码");

if ($_SERVER["REQUEST_METHOD"] === "POST" && isset($_POST['task_id'], $_POST['task_checked'])) {
    $taskId = $_POST['task_id'];
    $taskChecked = $_POST['task_checked'] === 'true' ? 'true' : 'false';

    // 预处理语句防止SQL注入
    $stmt = $pdo->prepare("UPDATE todo_tasks SET task_checked = :checked WHERE task_id = :id");
    $success = $stmt->execute(['checked' => $taskChecked, 'id' => $taskId]);

    if ($success) {
        echo json_encode(['success' => true]);
    } else {
        echo json_encode(['success' => false, 'message' => '数据库更新失败']);
    }
} else {
    echo json_encode(['success' => false, 'message' => '参数错误']);
}
?>

关键：移除无效的header跳转，改为返回JSON状态；用预处理语句确保安全

额外说明 #

• 需给待办项文本容器添加todo-text类，或根据你的DOM结构调整选择器
• 数据库表名、字段名需与实际项目一致
• 测试时可打开浏览器控制台（F12）查看Ajax请求状态与错误信息

内容的提问来源于stack exchange，提问作者Xenosis