差点让我崩溃的“全选”功能

今天在实现电商结算功能的时候遇到了个全选功能，做之前不以为然，做之后抓狂。为了让自己全身心投入到对这个问题的攻克，我特意将其拿出来先创建一个demo单独实现下。不搞不知道，一搞吓一跳，下面是我demo在浏览器运行的截图：

开始，我是这样写代码的：

    for (let i = 0; i < aCheckbox.length; i++) {
      aCheckbox[i].checked = this.checked;
    }
  });

  for (let i = 0; i < aCheckbox.length; i++) {
    aCheckbox[i].addEventListener("click", function () {
      for (let index = 0; index < aCheckbox.length; index++) {
        if (aCheckbox[index].checked) {
          oAllchecked.checked = aCheckbox[index].checked;
        } else {
          oAllchecked.checked = !aCheckbox[index].checked;
        }
      }
    });
  }

点击全选这个功能不难，主要问题出现在如何保证另外两个复选框在其中一个没有选中的情况下，全选的这个复选框没有选中。苦思良久，最后通过查找资料看到了如今的代码：

    aCheckbox[i].addEventListener("click", function () {
      let flag = true;
      for (let index = 0; index < aCheckbox.length; index++) {
        console.log(aCheckbox[index].checked);
        if (!aCheckbox[index].checked) {
          flag = false;
          break;
        }
      }
      oAllchecked.checked = flag;
    });
  } 

功能完美就解决，第一个代码问题的原因是‘aCheckbox[index].checked’这个判断不能解决两个复选框什么时候一个选中一个没选中的问题。这个问题不解决也就不能让全选复选框及时更新正确的选中状态了。

而下面这个代码通过设置一个中间值flag，及时记录每个复选框按钮的选中状态，能准确的赋值给全选功能的复选框按钮。于是这个需求就解决了~