前端小demo——全选和全不选

Posted yuebanzhou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端小demo——全选和全不选相关的知识，希望对你有一定的参考价值。

模拟购物车，实现全选或者全不选，或者其中任意一件单品单选的效果。

点击顶部复选框实现全选

技术分享图片

列表中任意一项未选中，顶部复选框就是未选中的状态

技术分享图片

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #div {
      width: 300px;
      margin: 100px auto;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 2px solid #ccc;
      width: 300px;
    }

    th,
    td {
      border: 1px solid #ccc;
      color: #000;
      padding: 10px;
    }

    th {
      background-color: #09c;
      font: bold 18px "幼圆";
      color: #ffffff;
    }

    td {
      font: bold 16px "幼圆";
      text-align: center;

    }

    tr {
      background-color: rgb(237, 238, 240);
    }

    tr:hover {
      cursor: pointer;
      background-color: #fff;
    }

    body {
      background-color: #ccc;
    }
  </style>
</head>

<body>
  <div id="div">
    <table>
      <caption>
        <h2>选择武器</h2>
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" id="all" />
          </th>
          <th>武器</th>
          <th>奥义</th>
        </tr>
      </thead>
      <tbody id="content">
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>铁碎牙</td>
          <td>金刚爆流破</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>天生牙</td>
          <td>冥道残月破</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>梓山弓矢</td>
          <td>破魔净化</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>爆碎牙</td>
          <td>苍龙破</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>斗鬼神</td>
          <td>爆流破</td>
        </tr>
        <tr>
          <td>
            <input type="checkbox" />
          </td>
          <td>丛云牙</td>
          <td>狱龙破</td>
        </tr>
      </tbody>

    </table>
  </div>
  <!-- <script src="common.js"></script> -->
  <script>
    function zy$(id) {
      return document.getElementById(id)
    };
    //获取元素
    var all = zy$("all");
    //获取所有的复选框
    var tbodyO = zy$("content").getElementsByTagName("input");
    //第一步，tbody中的状态和全选复选框状态一致
    //注册点击事件，添加事件处理函数
    all.onclick = function () {
      for (var i = 0; i < tbodyO.length; i++) {
        tbodyO[i].checked = this.checked;
      }
    };
    //第二步，tbody中的复选框状态，影响全选框
    //为tbody中所有的复选框注册点击事件
    for (var i = 0; i < tbodyO.length; i++) {
      tbodyO[i].onclick = function () {
        //设置一个变量为判断标识
        var flag = true;
        //循环遍历
        for (var j = 0; j < tbodyO.length; j++) {
          //只要存在没被勾选的复选框
          if (!tbodyO[j].checked) {
            //判断标识为假，不影响全选框
            flag = false;
            break;
          }
        }
        all.checked = flag;
      };
    }
  </script>
</body>

</html>

 

以上是关于前端小demo——全选和全不选的主要内容，如果未能解决你的问题，请参考以下文章

JS——全选和全不选

多选框的全选和全不选(复制)

react 全选和全不选

Jquerycheckbox的全选和全不选

JS实现全选和全不选

js实现checkbox的全选和全不选功能