Jquery Django：用我的“ToDoChecklistTask”模型更新布尔字段时遇到问题

我现在有一个新问题。一些原始代码来自，但我的views.py文件包含一个名为modify_checked_value的新函数，而我的jQuery文件这次进行了不同的修改，以向服务器发送更新保存在那里的任务的请求。在我的URL文件中添加了一行，并对我用来呈现列表的一个小HTML模板片段进行了轻微更改

这是我在五个小时前发现并试图解决的一个问题，但仍然没有成功，因为我还是Django的新手。我有一个“待办事项清单”，我把它保存在Django数据库中。我使用CharField将任务表示为字符串，使用BooleanField确定任务是否已完成，如果稍后有人发现任务未完成，则可以取消选中该选项

假设我有一些任务没有选中复选框，因为它们在创建时最初没有选中。当我单击其中一个并打印出数据库的QuerySet时，我注意到从该模型返回的布尔值为true，因此str函数输出一个“Yes”作为输出字符串的一部分。当我单击同一复选框时，布尔字段应该设置为false，因此_str__函数应该输出一个“No”作为字符串的一部分

但事实证明，在选中和取消选中之后，任务的布尔字段仍然设置为true，因此当我完全刷新页面并且模板呈现保存的任务时，当它到达该任务时，标签就被划掉了。任务的布尔字段应为false，因此标签不应交叉

当我从浏览器中取消选中复选框时，如何更新数据库中的任务对象，使其布尔字段设置为false？到目前为止，每当我选中任务旁边的复选框时，该布尔字段将始终为true

请看一看我的新代码并帮助我

ToDoList.js：

$(function(){

    $("#addTaskButton").click(function(){
        var taskInput = $("#taskInputTextField").val();
        var newTask = $("<div class=\"checkbox-task\"><label class=\"task\" ><input type=\"checkbox\">" + taskInput + "</label></div>");
        if (taskInput.length === 0)
        {
            alert("There is nothing entered in the Task input field. Please enter a task before clicking on the \"Add Task\" button.");
            return false;
        }

        $.post("process-request", {new_task: taskInput});

//            $("#listOfThingsToDo").load(document.URL + ' #listOfThingsToDo');
            //$("#listOfThingsToDo").append("<div class=\"checkbox-task\"><label><input class=\"task\" type=\"checkbox\">" + data[data.length - 1].fields.task_to_do + "</label></div>");

        $("#listOfThingsToDo").append(newTask);
            $(".checkbox-task:last").hide();
            $(".checkbox-task:last").fadeIn(500);

        $(newTask).change(function(event){
            console.log($(event.target).is(':checked'));

             //$.post("modify-checked-value", {this_checkbox_is_checked: $(event.target).is(':checked'), index_of_element: $(newTask).index()});
                if ($(event.target).is(':checked'))
                {
                    $.post("modify-checked-value", {this_checkbox_is_checked: true, index_of_element: $(newTask).index()});
                    $(event.target).parent().css("text-decoration", "line-through");
                    $(event.target).attr("checked:\"checked\"");
                }
                else
                {
                     $.post("modify-checked-value", {this_checkbox_is_checked: false, index_of_element: $(newTask).index()});
                    $(event.target).parent().css("text-decoration", "none");
                    $(event.target).removeAttr("checked");
                }


        });
    });

    $("#removeAllTasksButton").click(function() {
        $.post("remove-all-tasks", null, function(data) {
            $("#listOfThingsToDo").empty();
        });
    });

    $('#listOfThingsToDo :checkbox').click(function() {
        var $this = $(this);
        console.log($this.is(':checked'));
        console.log("asdglkadfjglkadfjglkfdajgl");
        console.log($(event.target).parent().parent().index());

        //$.post("modify-checked-value", {this_checkbox_is_checked: $(event.target).is(':checked'), index_of_element: $(event.target).parent().parent().index()});

        if ($this.is(':checked')) 
        {
            $.post("modify-checked-value", {this_checkbox_is_checked: true, index_of_element: $(event.target).parent().parent().index()});
            $(event.target).parent().css("text-decoration", "line-through");
        } 
        else 
        {
            $.post("modify-checked-value", {this_checkbox_is_checked: false, index_of_element: $(event.target).parent().parent().index()});
            $(event.target).parent().css("text-decoration", "none");
            $(event.target).removeAttr("checked");
        }


    });

});

ListOfTasks.html：

{% for task in task_list %}
                <div class="checkbox-task"><label class="task" {% if task.task_check_marked %} style="text-decoration: line-through"{% endif %} ><input type="checkbox" {% if task.task_check_marked %} checked="checked" {% endif %}>{{ task.task_to_do }}</label></div>
{% endfor %}

---

这是有点难遵循您的代码，我不能确切地说是怎么回事。但有一点似乎有问题，那就是依赖索引作为复选框id，然后使用该值索引到ToDoChecklistTask.objects.all。您没有显示您的模型，因此我不知道您是否定义了任何顺序，但很可能是数据库以不同的顺序返回数据，因此索引不匹配

---

相反，您应该特别使用对象的pk值作为复选框id，并在通过ToDoChecklistTask.objects.getpk=checkbox_id检索项目时使用它。

我身边有人对此进行了研究，我们花了大约几个小时试图解决这个问题；我们终于找到了问题所在。我们从那里决定，我也更新了元素通过其各自主键访问的方式

在modify_checked_value函数中，我将为checkbox_value分配request.POST[此_checkbox_已选中]的值。然后我将其分配给我的模型字段任务\u check\u marked。以前，我知道checkbox_值是一个布尔值。但是因为我使用JSON在web浏览器和服务器之间传输数据，request.POST[this_checkbox_is_checked]实际上是一个字符串，而不是我所期望的布尔值

因为checkbox_值被分配了一个字符串，Python实际上被计算为true，因此我注意到当我双击一个最初未选中的复选框并刷新页面时，复选框中会出现复选框

modify_checked_value函数现在看起来是这样的，因此站点正在按其应该的方式工作：

@csrf_exempt
def modify_checked_value(request):
    checkbox_value = request.POST["this_checkbox_is_checked"]
    checkbox_id = int(request.POST["id_of_element"])
    task_to_modify = ToDoChecklistTask.objects.get(id = checkbox_id)

    task_to_modify.task_check_marked = (checkbox_value == "true")
    task_to_modify.save()

    data_to_return = serializers.serialize('json', ToDoChecklistTask.objects.all());
    return HttpResponse(data_to_return, 'application/json')

---

无论如何，除非您认为有必要，否则我不会发布代码的其余部分，因为它花费了太多时间。

我更新了我的问题；我只是想问，每当我取消选中复选框时，如何更新我的任务对象，从而删除标签文本中的行，以便在刷新页面时，该复选框保持未选中状态，标签不会被划掉。我在我的网站上使用的排序是，我添加的每个新任务总是列表中的最后一个。我添加的第一个任务是第一个任务，即使我添加了其他任务，它仍然是第一个任务。我使用索引查找未选中的任务，以便访问其布尔字段并将其设置为false。第一个任务是0，第二个任务是1，依此类推。依赖排序仍然不是一个好主意，尤其是在pk使用不再复杂的情况下。你知道如何获取对象的主键吗？顺便说一下，我已经为我正在使用的模型添加了代码；此处不会覆盖ID字段。在此之前，我在BooleanField构造函数的括号中传递了default=False，但是我删除了它，原因是我记不清了。一张照片真的会更有用吗？等一下；如何传递对象保存的主键 通过jQuery返回服务器中的数据？这让我很困惑。

from django.db import models

class ToDoChecklistTask(models.Model):
    task_to_do = models.CharField(max_length = 200)
    task_check_marked = models.BooleanField()

    def __str__(self):
        stringToReturn = "Task: " + self.task_to_do + " Is the task done? "
        if self.task_check_marked:
            stringToReturn += "Yes"
        else:
            stringToReturn += "No"
        return stringToReturn

@csrf_exempt
def modify_checked_value(request):
    checkbox_value = request.POST["this_checkbox_is_checked"]
    checkbox_id = int(request.POST["id_of_element"])
    task_to_modify = ToDoChecklistTask.objects.get(id = checkbox_id)

    task_to_modify.task_check_marked = (checkbox_value == "true")
    task_to_modify.save()

    data_to_return = serializers.serialize('json', ToDoChecklistTask.objects.all());
    return HttpResponse(data_to_return, 'application/json')