我来帮你补全并修正这个待办事项的状态同步脚本，解决原脚本里的逻辑缺失和细节问题：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // 给所有复选框绑定点击事件
    $('input:checkbox').on('click', function() {
        // 获取当前点击的复选框的状态和唯一标识（这里假设你给每个复选框加了data-todo-id属性对应数据库ID）
        const todoId = $(this).data('todo-id');
        const isChecked = $(this).is(':checked');

        // 发送AJAX请求到后端
        $.ajax({
            type: 'POST',
            url: 'send.php',
            // 传递给后端的参数：待办ID和状态
            data: {
                todo_id: todoId,
                completed: isChecked ? 1 : 0
            },
            // 预期后端返回JSON格式
            dataType: 'json',
            // 请求成功后的处理
            success: function(response) {
                if (response.success) {
                    console.log('状态更新成功');
                    // 这里可以加前端反馈，比如给对应行加完成样式
                    $(this).closest('li').toggleClass('completed', isChecked);
                } else {
                    console.error('状态更新失败:', response.message);
                    // 失败时恢复复选框状态，避免前后端不一致
                    $(this).prop('checked', !isChecked);
                }
            }.bind(this), // 绑定this指向当前点击的复选框
            // 请求失败的处理
            error: function(xhr, status, error) {
                console.error('AJAX请求出错:', error);
                // 出错时恢复复选框状态
                $(this).prop('checked', !isChecked);
            }.bind(this)
        });
    });
});
</script>

关键修正点说明： #

• 用$(this)替代全局的$('input:checkbox')，确保我们只操作当前被点击的复选框，避免误操作其他复选框
• 新增data-todo-id属性读取：你需要给每个复选框加上这个属性，比如<input type="checkbox" data-todo-id="1">，用来告诉后端要更新哪条待办记录
• 完善data参数：把待办ID和状态（用1/0表示已完成/未完成）打包传给后端，符合后端接收参数的逻辑
• 添加success和error回调：不仅能调试请求状态，还能在请求失败时恢复复选框状态，避免前端显示和数据库状态不一致
• 用.bind(this)确保回调函数里的this依然指向当前点击的复选框，方便后续DOM操作

后端send.php示例（供参考） #

你需要在send.php里处理POST请求，完成数据库更新逻辑：

<?php
// 连接数据库（请替换成你的数据库配置）
$pdo = new PDO('mysql:host=localhost;dbname=your_db', 'username', 'password');

// 获取前端传递的参数
$todoId = $_POST['todo_id'] ?? null;
$completed = $_POST['completed'] ?? 0;

if ($todoId) {
    // 更新数据库记录
    $stmt = $pdo->prepare("UPDATE todos SET completed = :completed WHERE id = :id");
    $stmt->bindParam(':completed', $completed);
    $stmt->bindParam(':id', $todoId);
    
    if ($stmt->execute()) {
        echo json_encode(['success' => true]);
    } else {
        echo json_encode(['success' => false, 'message' => '数据库更新失败']);
    }
} else {
    echo json_encode(['success' => false, 'message' => '缺少待办ID参数']);
}
?>

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