在 JavaScript 中获取选中复选框的唯一父级的子级（或选中复选框的兄弟级）

Question

我正在用原生 JavaScript 创建一个待办事项应用程序。

我将每个待办事项的 id 和值存储在本地存储中。以及一个布尔值，指定是否选中了相应的待办事项复选框。

只要没有选中任何复选框，它就可以完美运行。

这是本地存储的示例 -

"{\"toDo1630557891826\":\"Clean bedroom false\",\"toDo1630557898808\":\"Wash dishes false\"}"

然而，一旦选中了一个复选框，DOM 树中的最新值就会被放置在本地存储中的两个 todo id 旁边。例如。当我检查 DOM 中的两个复选框时。

这就是我的意思-

{ToDos: "{\"toDo1630557891826\":\"Wash dishes true\",\"toDo1630557898808\":\"Wash dishes true\"}", length: 1}

我认为发生这种情况的原因是因为当我存储检查的 todo 值时，我只是在 DOM 中检索最新的 todo 值 -

toDoContainer.addEventListener("change", (e) => {
    const tgt = e.target;
    const toDo = tgt.parentNode.querySelector('.input');
    if (tgt.checked) {
        toDo.style.textDecoration = "line-through";
        toDo.style.opacity = "50%";
        isChecked(toDo.value);
    }
    else {
        toDo.style.textDecoration = "none";
        toDo.style.opacity = "100%";
        isChecked(toDo.value);
    }
});

这行代码专门导致了这个问题-

const toDo = tgt.parentNode.querySelector('.input');

正如我之前所说，这是获取最新的 .input (todo) 值。我需要为每个选中的复选框存储相应的值，而不覆盖本地存储中的其他 todo 值。

所以，我需要通过访问复选框的 todo 值兄弟来以某种方式存储每个 todo 的值。

我不知道该怎么做。

这是我的 codepen 以获得更多上下文。当然，虽然没有本地存储-

https://codepen.io/harri-greeves/pen/LYLEKNj

Answer 1

您可能需要考虑这一点：

toDoContainer.addEventListener("change", (e) => {
    const tgt = e.target;
    const chk = tgt.checked;
    toDo.style.textDecoration = chk ? "line-through" : "none";
    toDo.style.opacity = chk ? "50%" : "100%";
    saveTodos()
});

const saveToDos = () => {
  // change the global todo object (and make it an array)
  toDos = [...toDoContainer.querySelectorAll("input[type=checkbox]")].map(todo => {
    const checked = todo.checked
    const id = todo.closest("div").id;
    return { id,completed:checked }
  });
  localStorage.setItem("ToDos", JSON.stringify(toDos));
};