无法将复选框属性应用于 for 循环

Question

好吧，我希望我只是错过了一些简单的事情。基本上我正在制作一个待办事项列表，我希望每个列表项都出现一个复选框（这有效）。当用户单击复选框时， textDecoration = "line-through" 应该通过 listItem 类。这意味着一条线贯穿了该人创建的待办事项。这是我主要使用的代码：

function show() {
var todos = get_todos();

var html = '<ul>';
for(var i=0; i < todos.length; i++) {
    html += '<span><li class="listItem" style="float:left;">' + todos[i] + '</li><input class="checkBox" type="checkbox">' + '<button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
};
html += '</ul>';

document.getElementById('todos').innerHTML = html;

var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', remove);
};

////////////////////////////////////
//Everything above here works. Below is the checkbox issue

var checkBox = document.getElementsByClassName("checkBox");
var listItem = document.getElementsByClassName("listItem");

for (var i=0; i < checkBox.length; i++) {
    if (checkBox.checked == true){
        listItem.style.textDecoration = "line-through";
    }else {
        listItem.style.textDecoration = "none";
    }
};}

我现在的情况是，如果我在原始复选框中创建一个 onClick 函数，我可以使用该 if/else 语句并且它有点工作。如果我使用 document.getElementsByClassName 设置 checkBox/listItems 变量，它将不起作用，但如果我使用 document.getElementById，它将起作用。问题是它只适用于用户创建的第一个任务，而没有其他任务。我假设这是因为 Id 仅适用于一个元素（与适用于多个元素的类不同），或者因为它不像上面的代码那样循环通过 for 循环。

TL/DR 基本上，当我运行上面的代码时，我不断收到“Uncaught TypeError: Cannot set property 'textDecoration' of undefined 在展会上 (todo.js:57) 在 todo.js:75"。

当我为复选框创建一个单独的函数并使用 elementbyid 而不是 elementsbyclass 时，我没有收到此错误（也更改了上面 html 部分的 id/class）

我真的想让这些直通效果适用于所有任务，而不仅仅是第一个任务。任何想法都非常感谢。谢谢大家！

Answer 1

我会用 css 而不是 javascript 来完成这个（如果可能的话，这通常是我的规则）。在这种情况下，你必须对你的标记做一个小改动：因为没有previous-sibling选择器，你必须把inputs放在相应的lis之前，但是因为lis是@ 987654328@ 它仍然呈现完全相同的效果。

input:checked + li {
  text-decoration:line-through;
}

<ul>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">foo</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">bar</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">baz</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
</ul>

Answer 2

function show() {
  var todos = get_todos();

  var html = '<ul>';
  for (var i = 0; i < todos.length; i++) {
    html += '<span><li class="listItem" style="float:left;">' + todos[i] + '</li><input class="checkBox" type="checkbox">' + '<button class="remove" id="' + i + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
  };
  html += '</ul>';

  document.getElementById('todos').innerHTML = html;

  var buttons = document.getElementsByClassName('remove');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', remove);
  };

  ////////////////////////////////////
  //Everything above here works. Below is the checkbox issue

  var checkBox = document.getElementsByClassName("checkBox");
  var listItem = document.getElementsByClassName("listItem");

  for (var i = 0; i < checkBox.length; i++) {
    if (checkBox[i].checked == true) {
      listItem[i].style.textDecoration = "line-through";
    } else {
      listItem[i].style.textDecoration = "none";
    }
  };
}

您可能错过了 listItem 和 checkBox 数组中的索引

Answer 3

我认为问题在于checkBox 是一个类似数组的对象。我想您知道，当您编写代码时，您会查看 checkBox.length，但是您无法索引到数组中。

你有：

var checkBox = document.getElementsByClassName("checkBox");
var listItem = document.getElementsByClassName("listItem");

for (var i=0; i < checkBox.length; i++) {
    if (checkBox.checked == true){
        listItem.style.textDecoration = "line-through";
    }else {
        listItem.style.textDecoration = "none";
    }
};}

为了清楚起见，我在需要的地方使用了复数形式的名称，并添加了索引参考：

var checkBoxes = document.getElementsByClassName("checkBox");
var listItems = document.getElementsByClassName("listItem");

for (var i=0; i < checkBoxes.length; i++) {
    if (checkBoxes[i].checked == true){
        listItems[i].style.textDecoration = "line-through";
    }else {
        listItems[i].style.textDecoration = "none";
    }
};}