Django应用提交按钮故障：JS无法读取复选框checked属性

问题根源 #

你的选择器$("#list li input")匹配了<li>里所有input元素——包括每个任务项里那个没有id的<input size='3'>。当遍历到这个无id的input时，this.id是空字符串，document.getElementById(this.id)自然返回null，访问checked属性就会触发错误。

修复步骤 #

1. 精准匹配复选框
   把选择器改成只选中复选框类型的input，避免匹配到其他无关input：

var listItems = $("#list li input[type='checkbox']");

2. 用jQuery简化判断（可选但更优雅）
   既然已经引入了jQuery，没必要混用原生DOM方法，直接用jQuery的prop()方法判断复选框状态，完全绕开id的问题：

listItems.each(function() {
    if ($(this).prop('checked')) {
        checkedListItems.push(getTaskId(this.id));
        console.log(checkedListItems);
    }
})

3. 修正AJAX的done回调
   你当前的done(location.reload())会在AJAX请求发送前就执行页面刷新，改成函数形式才会在请求完成后触发：

$.ajax({
    headers: { "X-CSRFToken": _csrf },
    type: "POST",
    url: "/ptm/item_delete",
    data: {
        'deleteList[]': checkedListItems
    }
}).done(function() {
    location.reload();
});

完整修正后的JS代码 #

let _csrf = '{{csrf_token}}';
function submit_delete() {
    var listItems = $("#list li input[type='checkbox']");
    var checkedListItems = [];
    listItems.each(function() {
        if ($(this).prop('checked')) {
            checkedListItems.push(getTaskId(this.id));
            console.log(checkedListItems);
        }
    })
    $.ajax({
        headers: { "X-CSRFToken": _csrf },
        type: "POST",
        url: "/ptm/item_delete",
        data: {
            'deleteList[]': checkedListItems
        }
    }).done(function() {
        location.reload();
    });
}

function getTaskId(str) {
    return str.split('-')[1];
}

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