纯JavaScript中check变量未定义问题排查：点击Active按钮为未勾选复选框父元素添加filtered类失败

我来帮你排查一下代码里的问题，主要有这几个点导致功能失效和报错：

1. 错误操作NodeList集合 #

你用let check = document.querySelectorAll(".complete-txt");获取的是所有匹配的复选框组成的NodeList集合，不是单个DOM元素。直接用check.checked或者check.parentElement肯定会报错，因为集合本身没有这些属性，你需要遍历集合里的每一个复选框元素来操作。

2. 复选框勾选状态判断错误 #

checked属性是布尔值（true/false），不是字符串。你写的if (check.checked !== "true")逻辑完全错误，应该用if (!checkItem.checked)来判断复选框未被勾选。

3. 未处理动态生成的元素 #

你通过generateTemplate动态添加的todo项，初始的check变量只包含页面加载时的元素，新添加的复选框不会被包含进去。所以每次点击Active按钮时，都要重新获取所有的复选框元素。

修正后的代码 #

把你的active_btn点击事件代码改成这样：

active_btn.addEventListener("click", function () {
  // 每次点击都重新获取所有复选框，包含动态生成的
  let allChecks = document.querySelectorAll(".complete-txt");
  
  // 遍历每一个复选框
  allChecks.forEach(checkItem => {
    // 判断复选框是否未被勾选
    if (!checkItem.checked) {
      // 给父元素添加filtered类
      checkItem.parentElement.classList.add("filtered");
    } else {
      // 可选：如果勾选了，移除filtered类（保持状态正确）
      checkItem.parentElement.classList.remove("filtered");
    }
  });
});

另外，你代码里定义了但没用到的check_id变量可以直接删掉。

这样修改后，点击Active按钮时，就会遍历所有复选框，给未勾选的复选框的父元素（也就是.list-item）添加filtered类了。

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