待办应用点击复选框任务未删除无提示，调试报TypeError: checkbox is null错误

你遇到的TypeError: checkbox is null错误，根源在于代码误将<template>元素当成了待处理的列表项，导致找不到目标复选框元素。

错误原因拆解 #

你的<ul class="list">容器里嵌套了<template id="task-template">，当用list.children获取子元素时，这个template元素会被纳入items数组中。但<template>的内部内容不会被浏览器渲染，所以调用item.querySelector('.checkbox')处理这个template元素时，根本找不到.checkbox节点，返回null，自然在添加事件监听时触发报错。

两种修复方案 #

方案1：循环时过滤template元素

在遍历列表子元素的循环里，判断当前元素是否为template，直接跳过：

for (var i = 0; i < items.length; i++) {
  // 跳过template元素，只处理真正的列表项
  if (items[i].tagName === 'TEMPLATE') continue;
  addCheckHandler(items[i]);
}

方案2：调整HTML结构，移出template

把template元素放到<ul>外面，这样list.children就只会获取到真正的<li>列表项：

<div class="todo-list">
  <!-- 将template移到ul容器外 -->
  <template id="task-template">
    <li class="list-item">
      <div class="task-label">
        <input class="checkbox" type="checkbox" id="task-n" name="task">
        <label class="label" for="task-n"></label>
      </div>
      <div class="delete-btn">Delete</div>
    </li>
  </template>
  
  <!--List-->
  <ul class="list">
    <li class="list-item">
      <div class="task-label">
        <input class="checkbox" type="checkbox" id="task-1" name="task">
        <label class="label" for="task-1">Eat</label>
      </div>
      <div class="delete-btn">Delete</div>
    </li>
  </ul>
  <!-- 其余内容保持不变 -->
</div>

额外优化小技巧 #

你还可以简化toggleEmptyListMessage函数的逻辑，让代码更简洁：

var toggleEmptyListMessage = function() {
  // 直接根据列表项数量切换hidden类
  emptyListMessage.classList.toggle('hidden', items.length > 0);
};

修改完成后，点击复选框就能正常删除任务，空列表提示也会正确显示/隐藏了。

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