时间戳

首页 > 解决方案 > 如何修复复选框的 jquery removeClass？（添加课堂作品）

php - 如何修复复选框的 jquery removeClass？（添加课堂作品）

问题描述

身体（许多代码都取自 youtube 上的指南，一切正常，我以同样的方式做了所有事情，但它不起作用）。removeClass 仅在我刷新页面时才有效

<body>
    <div class="container">
        <div class="todo">
            <h1>todo app with php</h1>
            <h3>add a new to do</h3>
            <form action="index.php" method="POST">
                <div class="form-group">
                    <input type="text" class="form-control" name="todo" placeholder="todo name">
                </div>
                <div class="form-group">
                    <input type="submit" class="btn btn-primary" value="add a new todo task list">
                </div>
            </form>
            <?php while ($row = mysqli_fetch_array($result)) { ?>
                <div class="todo-item">

                    <?php if ($row['checkbox']) { ?>
                        <input type="checkbox" class="check-box" data-todo-id="<?php echo $row['id']; ?>" checked />
                        <h2 class="checked"><?php echo $row['t_name'] ?></h2>

                    <?php } else { ?>
                        <input type="checkbox" data-todo-id="<?php echo $row['id']; ?>" class="check-box" />
                        <h2><?php echo $row['t_name'] ?></h2>

                    <?php } ?>
                    <small>created: <?php echo $row['t_date'] ?></small>
                    <!--<button><a href="index.php?delete_todo=<?php echo $row['id']; ?>" class=" btn btn-danger">delete</a></button> -->
                </div>
            <?php } ?>
        </div>
    </div>

在脚本中，也许我应该输入类似 e.stopPropagation() 的内容，但我不明白在哪里以及如何输入。addClass 有效，但我不能回头删除选中的类。

<script>
        $(document).ready(function() {
            // checkbox toggle function
            $(".check-box").on('click', function(e) {

                //Get Task id from Task Table using checkbox
                const id = $(this).attr('data-todo-id');
                $.post('check.php', {
                        id: id
                    },
                    (data) => {
                        if (data != 'error') {
                            const h2 = $(this).next();

                            if (data === '1') {

                                h2.removeClass('checked');

                                // If Data Response id 1 means if checkbox is checked this alert will be show 
                            } else {

                                h2.addClass('checked');

                                // If Data Response id 0 means if checkbox is unchecked this alert will be show 
                            }
                        }
                    }
                );
            });

        });
    </script>

我有数据的 check.php


<?php

if (isset($_POST['id'])) {
    require 'db.inc.php';
    // Get Id From Post Method
    $id = $_POST['id'];
    if (empty($id)) {
        echo 'error';
    } else {
        // Select Task From Info table 
        $record = mysqli_query($connection, "SELECT * FROM todo WHERE id=$id");
        $todo = mysqli_fetch_array($record);

        $uId = $todo['id'];
        $checked = $todo['checkbox'];
        $uChecked = $checked ? 0 : 1;


        //Update Task Completed Status
        $res = mysqli_query($connection, "UPDATE todo SET checkbox=$uChecked WHERE id=$uId");

        if ($res) {
            echo $checked;
        } else {
            echo "error";
        }
        $connection = null;
        exit();
    }
} else {
    header("Location: ../index.php?mess=error");
}

标签： phpjquery

解决方案

推荐阅读