JavaScript获取已勾选checkbox同胞元素 解决待办应用localStorage值覆盖问题

核心问题出在两个地方：一是你更新存储时没有绑定待办的唯一ID，二是存储逻辑错误地全量覆盖了所有待办项的值。可以按以下步骤修正：

1. 修正事件监听的取值逻辑 #

首先确保事件只会响应checkbox的变更，同时获取当前待办的唯一标识，避免DOM结构调整导致取值错误：

toDoContainer.addEventListener("change", (e) => {
    const tgt = e.target;
    // 过滤非checkbox的触发事件，避免冒泡误触发
    if (!tgt.matches('input[type="checkbox"]')) return;
    // 用closest查找待办项根容器，比parentNode兼容性、稳定性更高
    const currentTodoWrap = tgt.closest('.todo-item');
    const todoInput = currentTodoWrap.querySelector('.input');
    // 从待办容器的自定义属性取当前待办的唯一ID，新增待办时需要把ID存在这里
    const currentTodoId = currentTodoWrap.dataset.todoId;
    const checkedStatus = tgt.checked;

    if (checkedStatus) {
        todoInput.style.textDecoration = "line-through";
        todoInput.style.opacity = "50%";
    } else {
        todoInput.style.textDecoration = "none";
        todoInput.style.opacity = "100%";
    }
    // 调用存储方法时传入当前待办的ID、内容、勾选状态，不要只传内容
    updateTodoStorage(currentTodoId, todoInput.value, checkedStatus);
});

2. 修正localStorage更新逻辑 #

不要全量重写所有待办项，只更新当前操作的单条待办：

function updateTodoStorage(todoId, todoContent, isChecked) {
    // 读取已有存储的待办数据，无数据则默认空对象
    const existTodos = JSON.parse(localStorage.getItem('ToDos') || '{}');
    // 仅修改当前ID对应的待办记录，其他记录保持不变
    existTodos[todoId] = `${todoContent} ${isChecked}`;
    // 写回localStorage
    localStorage.setItem('ToDos', JSON.stringify(existTodos));
}

3. 补全新增待办时的ID绑定逻辑 #

你新增待办生成唯一ID的时候，要把ID存在待办容器的自定义属性里，供后续更新时读取：

// 新增待办的示例逻辑，你可以结合自己原有逻辑调整
function addTodo(content) {
    const todoId = `toDo${Date.now()}`;
    const todoItem = document.createElement('div');
    todoItem.className = 'todo-item';
    // 把生成的唯一ID存到自定义属性
    todoItem.dataset.todoId = todoId;
    // 后续拼接checkbox、input等元素的逻辑和你原有一致即可
    // 新增待办时也调用存储方法写入新的待办记录
    updateTodoStorage(todoId, content, false);
    toDoContainer.appendChild(todoItem);
}

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