原生js实现全选、取消全选、反选复选框功能

最新推荐文章于 2023-07-15 17:45:49 发布

想做一只快乐的修狗

最新推荐文章于 2023-07-15 17:45:49 发布

阅读量740

点赞数 2

文章标签： javascript elementui 前端 dom

本文链接：https://blog.csdn.net/weixin_44109827/article/details/123156402

版权

代码：

<!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>千千音乐盒</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #panel {
        width: 400px;
        padding: 20px;
        /* 居中 */
        margin: 100px auto;
        background-color: #fff;
        /* 描边 */
        border: 1px solid #ddd;
        /* 圆角 */
        border-radius: 4px;
      }
      #panel-title {
        text-align: center;
      }
      .panel-content {
        margin: 10px 0px;
      }
      .panel-footer {
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div id="panel">
      <!-- 标题 -->
      <div id="panel-title">
        <h3>千千音乐盒</h3>
        <hr />
      </div>
      <!-- 音乐列表 -->
      <div class="panel-content">
        <input type="checkbox" />漂洋过海来看你 <br />
        <input type="checkbox" />后来 <br />
        <input type="checkbox" />一眼万年 <br />
        <input type="checkbox" />没那么简单 <br />
        <input type="checkbox" />如果你要离去 <br />
        <input type="checkbox" />恋恋风尘 <br />
        <input type="checkbox" />南山南 <br />
        <input type="checkbox" />涛声依旧 <br />
        <input type="checkbox" />可惜不是你 <br />
      </div>
      <!-- 按钮组 -->
      <div class="panel-footer">
        <hr />
        <button id="allSelect">全选</button>
        <button id="cancelSelect">取消选中</button>
        <button id="reverseSelect">反选</button>
      </div>
    </div>
    <script>
      // 获取dom的函数
      function $(id) {
        return typeof id === "string" ? document.getElementById(id) : null;
      }
      // 1.获取所有的复选框
      var inputs = document.getElementsByTagName("input");
      // 2.全选
      $("allSelect").onclick = function () {
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].checked = true;
        }
      };
      // 3.取消选中
      $("cancelSelect").onclick = function () {
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].checked = false;
        }
      };
      // 4.反选
      $("reverseSelect").onclick = function () {
        for (var i = 0; i < inputs.length; i++) {
          inputs[i].checked = !inputs[i].checked;
        }
      };
    </script>
  </body>
</html>