全选,反选，全不选

最新推荐文章于 2024-04-30 17:28:01 发布

如果决定要走又何必挽留

最新推荐文章于 2024-04-30 17:28:01 发布

阅读量330

点赞数

分类专栏：代码练习文章标签： java html servlet

本文链接：https://blog.csdn.net/qq_59076775/article/details/126863201

版权

代码练习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

全选;

全不选：

反选：

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="">
      <p><input type="checkbox" />苹果</p>
      <p><input type="checkbox" />菠萝</p>
      <p><input type="checkbox" />桃子</p>
      <p><input type="checkbox" />哈密瓜</p>
    </form>

    <button id="qx">全选</button>
    <button id="qbx">全不选</button>
    <button id="fx">反选</button>
  </body>
  <script>
    // 1.全选
    let qx = document.getElementById("qx");
    qx.addEventListener("click", function () {
      let input = document.querySelectorAll("input");
      for (let i = 0; i < input.length; i++) {
        input[i].checked = true;
      }
    });

    // 全不选

    let qbx = document.getElementById("qbx");
    qbx.addEventListener("click", function () {
      let input = document.querySelectorAll("input");
      for (let i = 0; i < input.length; i++) {
        input[i].checked = false;
      }
    });
    // 反选
    let fx = document.getElementById("fx");
   fx.addEventListener("click", function () {
      let input = document.querySelectorAll("input");
      for (let i = 0; i < input.length; i++) {
         if (input[i].checked===true) {
            input[i].checked=false
         }
         else{
            input[i].checked=true
         }
      
      }
    });

  </script>
</html>