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

2023-04-02 20:51| 来源: 网络整理| 查看: 265

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

需求还是之前一样：

点击全选复选框，另外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); }); } 复制代码

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

【本文地址】

公司简介

联系我们