Select all and reverse selection exercises

The first way of writing:

<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <!--  -->
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
    <script>
      // change 事件类型
      let checkAll = document.querySelector("#checkAll");
      // 文字信息提示
      let all = document.querySelector(".all");
      // 列表中的input
      let inputs = document.querySelectorAll(".ck");

      // 当表单的选中状态发生改变就会触发事件

      // 需求一：上面按钮改变，下面也跟着变动

      checkAll.addEventListener("change", function () {
        // 事件回调函数中的this指的是事件源
        // this -》 checkAll
        console.log(this.checked);
        // 值为true表明选中了 false表示没有选中
        let inputs = document.querySelectorAll(".ck");
        // console.log(inputs.length)// 伪数组，伪数组使用的时候需要遍历
        if (this.checked) {
          // 实现：当全选按钮处于选中状态时,
          // 让列表中的linput都选中
          for (let i = 0; i < inputs.length; i++) {
            inputs[i].checked = true;
          }
        } else {
          // 当全选按钮处于没有选中时，列表中的input都不选中
          for (let i = 0; i < inputs.length; i++) {
            inputs[i].checked = false;
          }
        }
        // 当全选、全不选的时候变更计算数
        // 如果是全选，count为3
        // 如果是全不选，count为0
        // 此处有优化
        if(!this.checked) {
          count = 0
        } else {
          count = 3
        }
        // 此处用到了三元运算符，用于变更文字
        all.innerHTML = this.checked ? "取消" : "全选";
      });

      // 需求二：下面按钮改变，上面也跟着变动

      // 如果列表中的input都是选中的，那么全选对应的input也是选中的
      // 如果列表中任意一个input是未选中的，那么全选就是未选中。

      // 遍历伪数组
      let count = 0;
      for (let i = 0; i < inputs.length; i++) {
        // 为每一个input添加事件监听
        inputs[i].addEventListener("change", function () {
          // console.log('测试')

          if (this.checked) {
            count++;
          } else {
            count--;
          }

          // 判断长度来分析是否是全选的
          if (count === inputs.length) {
            console.log("全部选中了");
            checkAll.checked = true;
            all.innerHTML = '取消'
          } else {
            console.log("没有全选");
            checkAll.checked = false;
            all.innerHTML = '全选'
          }
        });
      }
    </script>
  </body>
</html>

The second way of writing (optimized version):

<!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>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      table {
        border-collapse: collapse;
        border-spacing: 0;
        border: 1px solid #c0c0c0;
        width: 500px;
        margin: 100px auto;
        text-align: center;
      }

      th {
        background-color: #09c;
        font: bold 16px "微软雅黑";
        color: #fff;
        height: 24px;
      }

      td {
        border: 1px solid #d0d0d0;
        color: #404060;
        padding: 10px;
      }

      .allCheck {
        width: 80px;
      }
    </style>
  </head>
  <body>
    <!--  -->
    <table>
      <tr>
        <th class="allCheck">
          <input type="checkbox" name="" id="checkAll" />
          <span class="all">全选</span>
        </th>
        <th>商品</th>
        <th>商家</th>
        <th>价格</th>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米手机</td>
        <td>小米</td>
        <td>￥1999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米净水器</td>
        <td>小米</td>
        <td>￥4999</td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" class="ck" />
        </td>
        <td>小米电视</td>
        <td>小米</td>
        <td>￥5999</td>
      </tr>
    </table>
    <script>
      // change 事件类型
      let checkAll = document.querySelector("#checkAll");
      // 文字信息提示
      let all = document.querySelector(".all");
      // 列表中的input
      let inputs = document.querySelectorAll(".ck");

      // 当表单的选中状态发生改变就会触发事件

      // 需求一：上面按钮改变，下面也跟着变动

      checkAll.addEventListener("change", function () {
        // 事件回调函数中的this指的是事件源
        // this -》 checkAll
        console.log(this.checked);
        // 值为true表明选中了 false表示没有选中
        let inputs = document.querySelectorAll(".ck");
        // console.log(inputs.length)// 伪数组，伪数组使用的时候需要遍历
        for (let i = 0; i < inputs.length; i++) {
          inputs[i].checked = this.checked;
        }

        // 当全选、全不选的时候变更计算数
        // 如果是全选，count为3
        // 如果是全不选，count为0
        // 通过三元来表达
        !this.checked ? (count = 0) : (count = 3)

        // 此处用到了三元运算符，用于变更文字
        all.innerHTML = this.checked ? "取消" : "全选";
      });

      // 需求二：下面按钮改变，上面也跟着变动

      // 如果列表中的input都是选中的，那么全选对应的input也是选中的
      // 如果列表中任意一个input是未选中的，那么全选就是未选中。

      // 遍历伪数组
      let count = 0;
      for (let i = 0; i < inputs.length; i++) {
        // 为每一个input添加事件监听
        inputs[i].addEventListener("change", function () {
          // console.log('测试')
          
          // 通过三元优化
          this.checked ? count++ : count--

          // 判断长度来分析是否是全选的
          if (count === inputs.length) {
            console.log("全部选中了");
            checkAll.checked = true;
            all.innerHTML = '取消'
          } else {
            console.log("没有全选");
            checkAll.checked = false;
            all.innerHTML = '全选'
          }
        });
      }
    </script>
  </body>
</html>

Knowledge points used in the case

pseudo array

A pseudo-array is a simulated array that represents a set of values in an array-like manner, but is not a real array.

For example, the arguments object is a front-end pseudo-array, which represents the parameters of the function:

For example:

function myFunc(a, b, c) {
  console.log(arguments[0]);  // a
  console.log(arguments[1]);  // b
  console.log(arguments[2]);  // c
}

myFunc(1, 2, 3);

ternary operator

The ternary operator is a conditional operator, and its format is: conditional expression? value 1 : value 2.

Its function is to use the result of the conditional expression as the judgment condition:

If the result of the conditional expression is true, execute the value 1;

If the result of the conditional expression is false, the value 2 is executed.

case:

int a=5;int b=10;int c= a>b ? a : b;

This sentence means that if a>b is true, then the value of c is a, otherwise the value of c is b.