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

3月21日写的一篇关于全选的文字收获了很好的反馈。这次我吸收了有些前辈提出的方法对全选功能的实现进行了扩充：先上图

需求还是之前一样：

1. 点击全选复选框，另外2个复选框的状态与全选复选框保持同步
2. 点击苹果/香蕉复选框时，只要其中一个没被选择，全选复选框就不能被选中，只有苹果/香蕉复选框都被选中，全选复选框才处于选中状态。

const checkAll = document.querySelector("#allchecked");
const allCheck = document.querySelectorAll(".inputBtn");

//点击全选
checkAll.addEventListener("click", function () {
    for (let i = 0; i < allCheck.length; i++) {
      allCheck[i].checked = checkAll.checked;
    }
});

下面是点击苹果/香蕉复选框对全选复选框起作用的逻辑代码

//方法一：经典法
for (let i = 0; i < allCheck.length; i++) {
    allCheck[i].addEventListener("click", function () {
      for (let j = 0; j < allCheck.length; j++) {
        if (!allCheck[j].checked) {
          checkAll.checked = false
          break
        }else{
          checkAll.checked = true
        }
      }
    });
}

//
方法二：假设法
for (let i = 0; i < allCheck.length; i++) {
    allCheck[i].addEventListener("click", function () {
      let flag = true;
      for (let j = 0; j < allCheck.length; j++) {
        if (!allCheck[j].checked) {
          flag = false;
          break;
        } else {
          flag = true;
        }
      }
      checkAll.checked = flag;
    });
}

//方法三：every
这里有个地方需要注意：因为我用querySelectorAll获取的所有复选框，其返回的是伪数组，所以我们需要通过Array.from()或扩展运算符将其转为真数组；然后这里我使用了事件委托。
//let newArr = Array.from(allCheck);  //将伪数组转化为真数组方法一
  let newArr2 = [...allCheck]; //将伪数组转化为真数组方法二
  const ul = document.querySelector("ul");
  ul.addEventListener("click", function (e) {
    if (e.target.tagName === "INPUT") {
      checkAll.checked = newArr2.every((item) => item.checked);
    }
  });
  
//方法四：filter
let newArr2 = [...allCheck]; //将伪数组转化为真数组方法一
  for (let i = 0; i < allCheck.length; i++) {
    newArr2[i].addEventListener("click", function () {
      let cha = newArr2.filter((item) => item.checked == true);
      cha.length == newArr2.length ? (checkAll.checked = true) : (checkAll.checked = false);
    });
  }

以上就是我目前所能写的全选功能所有方法了，若大家还有其他好的方法实现全选功能，欢迎大家留言区一起讨论。