JavaScript 待办事项列表划掉所有其他元素

Question

我建立了这个待办事项列表网站: https://mickanie.github.io/toDoList/ 但我注意到，当我将自己的元素添加到默认元素时，它只允许我划掉列表中的所有其他元素。

image更准确地说，我无法在所附图片上划掉 item1、item3 和 item5。有谁知道这是为什么以及如何解决它？

用于从列表中划掉元素的 JavaScript 函数:

const setDoneOnOff = () => {
li = document.querySelectorAll("li");
for (let i=0; i<li.length; i++) {
    li[i].addEventListener("click", function(f) {
        f.currentTarget.classList.toggle("done");
    });
}

我什至不知道问题是否出在那里(网站源代码中的完整代码)。

Answer 1

我不明白为什么人们需要用 Javascript 做一些简单的事情。

说明:也可以用div包起来，不一定要是form。

<form>
 <input type="checkbox" id="abc"><label for="abc">abc</label> 
 <input type="checkbox" id="123"><label for="123">123</label>
 <input type="checkbox" id="omg"><label for="omg">omg</label>
</form>

<style>
form{
  display:block;
}

input[type="checkbox"]:checked + label{
/* Target only input with a type of checkbox.
 * If the type of checkbox is checked, cross the input and label.
 * Keep in mind that you can NOT cross a checkbox.
 * But it must be there as a "event handler".
 * The plus is a selector that means something like "and" label
 * The input is the checkbox that toggles "checked" and the label is the actual text that gets crossed. */
  text-decoration: line-through;
}
</style>

jsfiddle

如果您不想要复选框，请将 input[type="checkbox"]{ display:none } 添加到您的样式中。

jsfiddle