javascript - "selecting all"复选框切换的 onClick 按钮功能

Question

我该如何编写一个 javascript 按钮来选择和取消选择所有复选框？

复选框 HTML(它们看起来都相同，但值不同):

<input type="checkbox" name="moviebox[]" value="Zombieland" style="width: 15px; height: 15px; margin: 0px;">

我的按钮:

<input type="button" value="Select All/None">

Answer 1

添加click event listener到您的按钮，然后在单击时切换所有复选框。

const button = document.querySelector(".select-all");
const checkboxes = document.querySelectorAll("input[type='checkbox']");
let everythingChecked;

button.addEventListener("click", () => {
  checkboxes.forEach(checkbox => {
    checkbox.checked = everythingChecked ? false : true;
  });
  everythingChecked = !everythingChecked
});

<input type="checkbox" name="foo">
<input type="checkbox" name="bar">
<input type="checkbox" name="baz">

<button type="button" class="select-all">
  Button
</button>