为复选框添加的onchange事件在JavaScript中不生效问题排查

核心问题：事件监听丢失 #

你代码里的div.innerHTML += '</br>'是导致onchange事件无响应的根本原因。当使用innerHTML修改元素内容时，浏览器会重新渲染整个div内部的HTML结构，之前通过appendChild添加的复选框和标签会被销毁后重新创建，而新创建的复选框并没有绑定removeTask事件，所以点击时毫无反应。

修复步骤 #

1. 替换innerHTML += '</br>'为创建<br>元素并appendChild，避免重新渲染整个容器：

// 替换 div.innerHTML += '</br>'
var br = document.createElement("br");
div.appendChild(br);

2. 修正两处细节错误：
   • 拼写错误：lable改为正确的label
   • JS中不能直接用label.for，需改用label.htmlFor（避免和循环关键字冲突）：

var label = document.createElement("label");
label.innerText = task;
label.htmlFor = counter;

3. 完善removeTask函数，实现勾选后删除任务的功能：

function removeTask(){
    const checkbox = this;
    const label = document.querySelector(`label[for="${checkbox.id}"]`);
    const br = checkbox.nextSibling.nextSibling; // 获取复选框后的换行元素
    
    // 从DOM中移除相关元素
    checkbox.remove();
    label.remove();
    br.remove();
    
    // 从tasks数组中移除对应项
    tasks = tasks.filter(item => item.id !== checkbox.id);
}

完整修复后的代码 #

<!DOCTYPE html>
<html>
<head>
    <title>TheToDoList</title>
</head>

<script>
let counter = 0
let tasks = []

function removeTask(){
    const checkbox = this;
    const label = document.querySelector(`label[for="${checkbox.id}"]`);
    const br = checkbox.nextSibling.nextSibling;
    
    checkbox.remove();
    label.remove();
    br.remove();
    
    tasks = tasks.filter(item => item.id !== checkbox.id);
}

function addTask(){
    var task = document.getElementById("tsk").value;
    if(!task.trim()) return; // 过滤空任务
    var div = document.getElementById("tsklst");
    
    var input = document.createElement("input")
    input.type = "checkbox";
    input.id = counter;
    input.value = task;
    input.onchange = removeTask;
    
    var label = document.createElement("label");
    label.innerText = task;
    label.htmlFor = counter;
    
    var br = document.createElement("br");
    
    div.appendChild(input);
    div.appendChild(label);
    div.appendChild(br);
    
    tasks.push(input); // 直接存入创建的元素，减少DOM查询
    counter++;
    document.getElementById("tsk").value = ""; // 添加后清空输入框
}
</script>

<body>
<h1>My ToDo List</h1>
<input id="tsk" type="text" placeholder="What You Need To Do?">
<input type="button" value="Add Task" onclick="addTask()">
<div id="tsklst"></div>
</body>
</html>

额外优化点 #

• 增加空任务过滤，避免添加无效项
• 任务添加后自动清空输入框，提升操作体验
• 直接将创建的input元素存入数组，减少不必要的DOM查询

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