Question

我已经在复选框中添加了一个点击事件，以便在点击它时检查另一个元素的类。这是一个循环，由于某种原因它只适用于第一行代码。

有任何建议如何解决这个问题？

PHP：

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

使用Javascript：

document.querySelector('input[type="checkbox"]').addEventListener('click', () => {
    document.querySelector('#submit_delete').classList.remove('disabled')
});

Answer 1

您需要使用querySelectorAll

来循环和收集结果

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

Answer 2

正如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>

循环中的事件listerner

2 个答案: