JS待办列表如何添加前置复选框，勾选后文本划除仍保留在列表

数据老陈

2026-9-2

问题根源

你之前通过document.createElement("input")创建的复选框元素没有插入到最终拼接的列表项模板中，属于无效代码不会渲染到页面。同时原有本地存储只保存待办纯文本，没有记录待办的完成状态，即便渲染出复选框，也无法持久化勾选状态、触发删除线样式。

实现步骤

调整待办数据结构：将原有存储纯字符串的待办数组改为存储对象，每个待办项包含content（待办文本）、completed（完成状态，布尔值，默认false）两个字段，同时兼容本地存储中旧版本的纯字符串格式数据。
修正渲染逻辑：删除无效的单独创建复选框DOM的代码，直接将复选框写入列表项的拼接模板中。给复选框绑定状态切换事件，勾选/取消时修改对应待办项的完成状态，更新本地存储后重新渲染列表。
绑定完成态样式：给待办文本单独包裹标签，根据completed状态动态添加删除线样式类，勾选后文本显示删除效果，条目保留在列表内不被移除。
适配原有新增、删除待办逻辑：新增待办时按新的对象结构存入数组，删除逻辑无需大改，保持原有操作数组、更新本地存储的流程即可。

参考代码

首先添加完成态的CSS样式：

.completed-task {
  text-decoration: line-through;
  color: #94a3b8;
}

修改后的完整功能代码：

// 复选框状态切换处理函数
function toggleTask(index) {
  const storageData = localStorage.getItem("New Todo");
  listArr = storageData === null ? [] : JSON.parse(storageData);
  // 翻转当前待办项的完成状态
  listArr[index].completed = !listArr[index].completed;
  localStorage.setItem("New Todo", JSON.stringify(listArr));
  showTasks();
}

function showTasks() {
  let getLocalStorage = localStorage.getItem("New Todo");
  if (getLocalStorage == null) {
    listArr = [];
  } else {
    listArr = JSON.parse(getLocalStorage);
    // 兼容旧版纯字符串格式的本地存储数据，自动转换为新的对象结构
    listArr = listArr.map(item => {
      if (typeof item === 'string') {
        return { content: item, completed: false }
      }
      return item
    })
  }
  const pendingNumb = document.querySelector(".pendingNumb");
  pendingNumb.textContent = listArr.length;
  listArr.length > 0 ? deleteAllBtn.classList.add("active") : deleteAllBtn.classList.remove("active");

  let newLiTag = "";
  listArr.forEach((element, index) => {
    // 复选框根据完成状态设置默认勾选，文本根据状态添加完成样式
    newLiTag += `
    <li>
      <input type="checkbox" ${element.completed ? 'checked' : ''} onchange="toggleTask(${index})">
      <span class="task-text ${element.completed ? 'completed-task' : ''}">${element.content}</span>
      <span class="delete-btn" onclick="deleteTask(${index})"><i class="fas fa-trash"></i></span>
    </li>`;
  });

  todoList.innerHTML = newLiTag;
  inputBox.value = "";
}

注意：需要同步修改你原有新增待办的逻辑，原来往数组里push纯文本的代码listArr.push(inputBox.value)要替换为对象结构：
listArr.push({
  content: inputBox.value.trim(),
  completed: false
})
删除单条、清空全部待办的逻辑不需要调整，保持原有操作数组、更新本地存储的写法即可正常运行。

实现效果

每个待办项前正常渲染复选框，勾选后对应文本自动添加删除线、置灰，取消勾选即可恢复正常样式
勾选状态会同步持久化到本地存储，刷新页面不会丢失状态
勾选操作不会移除待办条目，只有点击删除图标才会删除对应项

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