我在Django应用程序的提交按钮上遇到了麻烦，似乎JS函数不知道要查找哪些复选框，所有控制台返回的是“无法读取null的属性，读取“选中”我假设它与函数定义的东西，但我似乎无法让它工作
下面是代码：
<html>
<head>
{% load static%}
{% block content%}
<link rel="shortcut icon" type="image/png" href="{% static 'IMG/favicon.ico' %}"/>
<link rel="stylesheet" href="{% static 'CSS/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'CSS/jquery-ui.css' %}">
<script type="text/javascript" src="{% static 'JS/bootstrap.min.js' %}"></script>
<title>Task List</title>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="{% static 'JS/jquery-ui.min.js' %}"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
let _csrf = '{{csrf_token}}';
function submit_delete() {
var listItems = $("#list li input");
var checkedListItems = [];
listItems.each(function() {
if (document.getElementById(this.id).checked) {
checkedListItems.push(getTaskId(this.id));
console.log(checkedListItems);
}
})
$.ajax({
headers: { "X-CSRFToken": _csrf },
type: "POST",
url: "/ptm/item_delete",
data: {
'deleteList[]': checkedListItems
}
}).done(location.reload());
}
function getTaskId(str) {
return str.split('-')[1];
}
</script>
</head>
<body>
<div id="logo" class="border-success border border-3 rounded-2" style="width: 61.rem;">
<div class="card-body">
<img class="card-img" src="{% static '/IMG/Logo.png' %}">
</div>
</div>
<div id="taskList" class="card">
{% if task_list %}
<ul class="list-group" id="list">
{% for item in task_list %}
<li class="list-group-item" id='tdList'>
<input id="check-{{ item.id }}" type="checkbox" class="form-check-input me-1" value="">
<label class='d-flex w-100 justify-content-between'>
<h2 class="form-check-label" for="check-{{ item.id }}">{{ item.title }}</h2>
<small class='text-muted'>{{ item.date }}</small>
<input size='3'>
</label>
<h5 class="form-check-label">{{ item.description }}</h5>
</li>
{% endfor %}
</ul>
{% else %}
<p>There are no current tasks assigned to this department.</p>
{% endif %}
</div>
{% csrf_token %}
<div id="taskEnter" class="card-footer">
<div class="d-grid mx-auto">
{% if task_list %}
<button type="button" onclick="submit_delete()" value='delete' class="btn btn-success btn-lg d-grid" value='delete'><i class="">Submit</i></button>
{% endif %}
</div>
</div>
</body>
{% endblock %}
</html>
2条答案
按热度按时间uyhoqukh1#
在零件中：
document.getElementById(this.id)的计算结果为null，它没有任何属性，因此会出现异常。您实际上是在执行null.checked，但它不起作用。看起来您试图遍历复选框并确定它们是否被选中。我有理由相信您编写的函数中的
this将只引用window对象，因此调用this.id不会提供复选框id。（您正在对它们进行迭代！）所以不需要手动重新获取每一个。只需执行以下操作：请注意，该函数将
each当前正在迭代的单个listItem作为参数（由于它们实际上是复选框，所以命名起来容易混淆，但我在这里遵循了您的命名法），这正是您所需要的。nbnkbykc2#
尝试在
submit_delete函数第一行中使用的元素选择器中添加一个子组合符（'〉'）：正如文章所述，
<input size='3'>的.list li的后代input元素没有id属性。在each中处理这些元素将从getElementById返回null，并抛出错误checked不能是null的属性。大约
eachJAuery的each函数触发回调函数，并将
this值设置为迭代过程中处理的元素。该元素还作为回调函数的第二个参数提供给回调函数。HTML中的给定元素应该具有唯一的id值：this所指涉且具有id值的项目，使用this做为项目会比呼叫getElementById(this.id)简单。this引用），!this.id）是比getElementById(this.id)===null更简单的条件表达式。