全选

Question

全选

Sunny-117 opened this issue 2 years ago · comments

全选

beary · Answer 1 · Thu Aug 03 2023 22:16:06 GMT+0800 (China Standard Time)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="checkbox" id="all" /> 全选
    <br />
    <input type="checkbox" class="item" /> 选项1
    <input type="checkbox" class="item" /> 选项2
    <input type="checkbox" class="item" /> 选项3

    <script>
      const all = document.querySelector("#all");
      const items = document.querySelectorAll(".item");
      all.addEventListener("click", function () {
        for (let i = 0; i < items.length; i++) {
          items[i].checked = all.checked;
        }
      });
    </script>
  </body>
</html>