JavaScript复选框checked识别异常及删除确认弹窗重复触发问题排查

问题1：复选框优先级状态识别异常 #

触发根因 #

• 执行顺序逻辑颠倒：当前代码的执行流是「读取表单值创建任务→存入列表→渲染页面（才执行CheckCheck判断逻辑）」，CheckCheck的判断远晚于任务对象的创建时机。首次提交时CheckCheck还未执行，此时复选框的默认值就是on，自然会被存为任务的优先级。
• 状态残留引发取值颠倒：CheckCheck函数直接修改DOM复选框的value属性来存优先级值，但clear()函数仅重置了复选框的选中状态（checked = false），没有同步重置被修改过的value值。导致后续每次提交时，先读到的是上一次提交残留的value值，存入任务列表后，才由CheckCheck把value改成下一次要用的标识，形成越提交取值越颠倒的问题。

修复方案 #

• 调整逻辑执行顺序：优先级取值必须在创建任务对象、读取表单内容时同步计算，把判断逻辑从渲染流程移到任务入栈的环节，不要后置到渲染阶段。
• 不要依赖DOM元素的value属性传递自定义优先级：每次提交时直接基于复选框的checked状态映射固定取值，不修改DOM的value属性从根源避免残留。参考实现：

  function Pushed() {
    // 直接基于选中状态计算优先级，不操作DOM value
    const currentPriority = Taskpriority.checked ? "priority" : "normal";
    let newTasks = new Tasks(Tasktask.value, Taskdate.value, currentPriority);
    tasklist.push(newTasks);
    updateLocalStorage();
  }
  

• 简化clear()逻辑：仅需要把复选框的checked状态重置为false即可，无需操作value属性——反正每次提交都是直接读checked状态计算值，不会产生残留。

问题2：删除任务时确认弹窗重复弹出 #

触发根因 #

• 事件监听器重复绑定：当前给表格元素绑定删除点击事件的deleteItem()函数，是嵌套在Apply()函数内部执行的。而Apply()本身是每次提交新增任务时都会触发执行的入口，意味着每新增一个任务，就会给同一个固定的元素叠加绑定一次click事件监听，且从未解绑之前的监听。
• 这种情况下，绑定的事件监听数量和已新增的任务数完全一致：1个任务时绑定1次监听，点删除就弹1次确认窗；3个任务时累计绑定3次监听，点删除就会连续触发3次确认逻辑，弹出3个窗口。

修复方案 #

• 从根源避免重复绑定：把表格删除事件的绑定逻辑移出Apply()函数，放到页面初始化的全局执行流程中，只在页面加载完成时绑定一次事件，不要跟着每次新增任务的流程重复绑定。
• 顺带修复附带的删除逻辑bug：当前deleteTask函数里的splice参数错误，splice方法的第二个参数是要删除的元素数量，不是结束索引，需修正为tasklist.splice(currentTask, 1)，否则会出现多删元素的问题。

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