做ToDoList是前端入门最经典的小练习，但真正动手写的时候，很多人会在checkbox这里栽跟头：勾选任务后，本该自动移动到"已完成"分组的事项纹丝不动，控制台也不报错，看起来毫无头绪。这类问题十有八九不是逻辑设计错误，而是某个不起眼的拼写失误，导致DOM查询或者属性判断悄悄失效。本文以一个典型的单文件ToDoList为例，逐步拆解checkbox无法自动归类的排查思路，帮你定位那个藏在代码深处的拼写错误。
一、先看一段有问题的代码
下面这段代码是一个简化版的ToDoList，勾选checkbox后任务应该被移动到"已完成"列表中。但实际运行时，勾选了没有任何反应：
<ul id="todo-list">
<li class="todo-item">
<input type="checkbox" class="check-box" />
<span>学习JavaScript</span>
</li>
<li class="todo-item">
<input type="checkbox" class="check-box" />
<span>写周报</span>
</li>
</ul>
<ul id="done-list"></ul>
<script>
document.querySelectorAll('.check-box').forEach(function (box) {
box.addEventListener('change', function () {
if (this.ckecked) { // 拼写错误：ckecked
document.getElementById('done-list').appendChild(this.parentNode);
}
});
});
</script>眼尖的读者可能已经发现了：this.ckecked把checked写成了ckecked。访问一个不存在的属性会返回undefined，而undefined在if判断中是假值，所以分支永远不执行。更麻烦的是，这种情况不会抛出任何异常，控制台一片安静，这也是它难以被发现的原因。
类似的拼写坑还有不少：把type="checkbox"写成type="checkbox "（多了空格）、把类名done-list写成donelist导致getElementById返回null、在HTML里写class="chekcbox"而在JS里查询.checkbox。这些错误的共同特点是：JS引擎不会提醒你，页面只是安静地不工作。
二、排查这类问题的系统方法
遇到DOM渲染不生效的情况，不要急着改代码，先按固定顺序排查，效率会高很多。
第一步，确认事件是否被触发。在监听器第一行加上console.log('changed', this.checked)，如果勾选后控制台没有输出，说明问题出在事件绑定上，比如选择器写错、元素还没渲染就执行了脚本。第二步，打印关键属性值。this.checked应该输出布尔值，如果输出undefined，那几乎可以断定是属性名拼错了。第三步，检查目标元素是否拿到。console.log(document.getElementById('done-list'))输出为null就说明id拼写不一致。
还有一个容易忽略的点：大小写。JavaScript的DOM属性是区分大小写的，this.Checked和this.checked是两个东西。另外，HTML属性和DOM属性并不完全等价，checkbox的选中状态应该用DOM属性checked读取，而不是getAttribute('checked')，后者只能拿到HTML里静态写死的内容，勾选后并不会更新，这也是一种"看起来没拼错但逻辑就是不对"的隐形坑。
推荐在代码里强制使用严格一些的工具链，比如启用ESLint的no-undef规则可以在某些场景下提前暴露问题，VSCode的拼写检查插件也能标出可疑的标识符。养成写完立刻用console.log验证中间值的习惯，比反复盲改代码快得多。
三、修正后的完整实现
下面是修正拼写错误并做了健壮性增强的版本，支持勾选后归类到已完成、取消勾选后回到待办列表：
<ul id="todo-list">
<li class="todo-item">
<input type="checkbox" class="check-box" />
<span>学习JavaScript</span>
</li>
</ul>
<ul id="done-list"></ul>
<script>
var todoList = document.getElementById('todo-list');
var doneList = document.getElementById('done-list');
document.querySelectorAll('.check-box').forEach(function (box) {
box.addEventListener('change', function () {
var item = this.parentNode; // 当前任务项 li
if (this.checked) {
doneList.appendChild(item); // 勾选：移到已完成
} else {
todoList.appendChild(item); // 取消：移回待办
}
});
});
</script>这段代码的关键在于正确读取this.checked，并根据它的布尔值决定把<li>节点移动到哪个容器。appendChild的一个特性是：如果一个节点已经在文档中，再次追加它会自动从原位置移除，所以我们不需要手动删除旧节点，直接追加即可完成"归类"。
如果任务是动态添加的，逐个绑定监听器会失效，此时应该用事件委托，把监听器挂到父容器上：
document.body.addEventListener('change', function (e) {
if (e.target.classList.contains('check-box')) {
var item = e.target.parentNode;
var target = e.target.checked ? doneList : todoList;
target.appendChild(item);
}
});事件委托的好处是无论什么时候新增任务，都不需要重新绑定事件，因为事件会沿着DOM树冒泡到body上被统一处理。注意这里用的是e.target.classList.contains来判断来源，类名字符串必须和HTML里写的完全一致，多一个空格或少一个字母都会导致判断失败。
四、举一反三：其他常见的拼写引发渲染问题
checkbox归类失败只是拼写错误的一种表现，实际开发中还有几类高频事故值得警惕。
第一类是CSS类名不同步。JS里写classList.add('complted')，CSS里定义的是.completed，样式自然不生效。第二类是模板字符串里的变量拼错，比如${item.tex}应为${item.text}，页面渲染出一片空白却没有报错，因为undefined转字符串后就是"undefined"或者直接被模板吞掉。第三类是innerHtml和innerHTML的大小写差异，前者是给对象添加了一个无用属性，页面纹丝不动。
防范这类问题最有效的手段是保持命名统一：同一份数据的名称在HTML、CSS、JS三处尽量复制粘贴而不是手打；动态渲染前用console.log确认中间对象的结构；有条件的话引入TypeScript，它的类型检查能在编译阶段就发现ckecked这种不存在的属性，把隐蔽的运行时问题变成编辑器里的一条红线。排查拼写错误虽然枯燥，但掌握这套方法后，你面对任何"页面不生效但不报错"的问题都会更有底气。
JavaScript ToDoListcheckbox归类DOM渲染修改时间：2026-09-14 09:44:51