Sunny-117/js-challenges

全选

Sunny-117 opened this issue · 1 comments

Sunny-117 commented
全选
bearki99 commented 
<!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>