任务旁Checkbox无法勾选且控制台提示无id/name属性问题求助

核心功能失效原因（Checkbox勾选无效、无删除线） #

你的代码里有两个关键错误导致功能异常，跟控制台的id/name警告无关：

1. 状态切换属性名拼写错误
   toggleTask函数里把completed写成了complete（少了末尾的d），导致任务状态根本没切换：

function toggleTask(index) {
    // 错误写法：tasks[index].complete = !tasks[index].completed;
    tasks[index].completed = !tasks[index].completed; // 修正后
    renderTasks();
}

2. CSS类名不匹配
   你给文本span添加的类是complete，但CSS里定义的生效类是.task.completed，类名不一致，且拼接时多余的空格会导致类名无效：

// 错误写法：taskText.className = "task" + (task.completed ? " complete " : "");
taskText.className = `task${task.completed ? " completed" : ""}`; // 修正后

解决控制台警告（添加id/name） #

控制台的提示只是非致命警告，给每个Checkbox分配唯一的id和name即可消除，在创建checkbox的代码中添加：

const checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.checked = task.completed;
// 添加以下两行
checkbox.id = `task-checkbox-${index}`;
checkbox.name = `task-checkbox-${index}`;
checkbox.addEventListener("change", () => toggleTask(index));

完整修正后的JS代码 #

let tasks = [];

function addTask() {
    const taskInput = document.getElementById("addTaskInput");
    const taskText = taskInput.value.trim();
    if (taskText !== "") {
        tasks.push({ text: taskText, completed: false });
        renderTasks();
        taskInput.value = "";
    }
}

function toggleTask(index) {
    tasks[index].completed = !tasks[index].completed;
    renderTasks();
}

function deleteTask(index) {
    tasks.splice(index, 1);
    renderTasks();
}

function renderTasks () {
    const taskList = document.getElementById("added-task")
    taskList.innerHTML = "";
    tasks.forEach((task, index) => {
        const li = document.createElement("li");
        const checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.checked = task.completed;
        checkbox.id = `task-checkbox-${index}`;
        checkbox.name = `task-checkbox-${index}`;
        checkbox.addEventListener("change", () => toggleTask(index));
        li.appendChild(checkbox);

        const taskText = document.createElement("span");
        taskText.textContent = task.text;
        taskText.className = `task${task.completed ? " completed" : ""}`;
        li.appendChild(taskText);

        const deleteBtn = document.createElement("button");
        deleteBtn.textContent = "Delete";
        deleteBtn.className = "delete-btn"
        deleteBtn.addEventListener('click', () => deleteTask(index));
        li.appendChild(deleteBtn);

        taskList.appendChild(li);
    });
}

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