Javascript 循环中的事件侦听器

我在复选框中添加了一个click事件，这样当它被单击时，另一个元素的类就会被选中。 这是一个循环，出于某种原因，它只在第一行代码上工作

有什么建议可以解决这个问题吗

PHP:

---

您需要使用

querySelectorAll

[].forEach.call(document.querySelectorAll('input[type="checkbox"]'), 
  elm=> elm.addEventListener('click', () =>
  document.querySelector('#submit_delete').classList.remove('disabled')
));

---

正如dandavis所指出的，

document.querySelector

只会得到第一次点击。如果要获得多个结果，需要使用

document.querySelectorAll

。这将返回一个

NodeList

，您可以使用

array.from

将其转换为一个数组

while ($row_list = mysqli_fetch_array($res_list)) { 
  $i++;
  echo '
    <div class="checkbox">
      <label>
        <input type="checkbox" name="del" value="ja">
        Ja ik wil deze toolbox verwijderen
      </label>
    </div>
  ';
}

<script>
const deleteButton = document.querySelector('#submit_delete');
const checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));
checkboxes.forEach(el => el.addEventListener('click', () =>
  deleteButton.classList.remove('disabled')
))
</script>

while（$row\u list=mysqli\u fetch\u数组（$res\u list））{
$i++；
回声'
是的，我会的
';
}
const deleteButton=document.querySelector（'submit_delete'）；
const checkbox=Array.from（document.querySelectorAll（'input[type=“checkbox”]”）；
复选框.forEach（el=>el.addEventListener（'click'，（）=>
deleteButton.classList.remove（'disabled'）
))

您介意展示一下您是如何使用循环的吗？因为您使用的是

[]。从
中，您可以将
forEach（）
回调作为第二个参数传递到
。从（）
中，它将在每个元素上执行，与您的forEach完全相同，但没有杂散变量……可能不是我实现它的方式，但是，当我写这样的例子时，我喜欢更罗嗦一点。对你我来说显而易见的可能不是下一个读到这个答案的人：）
[].forEach.call(document.querySelectorAll('input[type="checkbox"]'), 
  elm=> elm.addEventListener('click', () =>
  document.querySelector('#submit_delete').classList.remove('disabled')
));

while ($row_list = mysqli_fetch_array($res_list)) { 
  $i++;
  echo '
    <div class="checkbox">
      <label>
        <input type="checkbox" name="del" value="ja">
        Ja ik wil deze toolbox verwijderen
      </label>
    </div>
  ';
}

<script>
const deleteButton = document.querySelector('#submit_delete');
const checkboxes = Array.from(document.querySelectorAll('input[type="checkbox"]'));
checkboxes.forEach(el => el.addEventListener('click', () =>
  deleteButton.classList.remove('disabled')
))
</script>