牛客JS题（三十）全选

注释很详细，直接上代码

涉及知识点：

全选逻辑判断
性能优化

题干：
在这里插入图片描述

我的答案

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /></head><style>ul {list-style: none;}</style><body><ul><li>全选<input type="checkbox" id="all" /></li><li>Java<input type="checkbox" class="item" /></li><li>javaScript<input type="checkbox" class="item" /></li><li>C++<input type="checkbox" class="item" /></li><li>python<input type="checkbox" class="item" /></li><li>.net<input type="checkbox" class="item" /></li></ul><script>/*** 题目要求onchange，还有一些命名，题目没说但评测是强制的，主打一个面向测例编程🤣🤣* 这题需要注意的有两个点：* 1. 全选按钮的点击事件*   这里需要分两种情况吗，不需要对吧，item的选中状态和all是一样的* 2. 每个item的onchange事件*   这里小友可能有疑问了，这里也可以像上面一样不考虑多种情况呀，*   如果当一个item取消选中还需要遍历判断吗？不需要啦，复杂度能减一点是一点嘛*   其实还有个方法，可以在初始化的时候计算一次选中的数量，此后取消-1，选中+1，*   每次只需要判断选中数量是否等于总数量不就行了，这种情况的O(n)复杂度降到了O(1)，这里我就不演示了，小友可以自行尝试🥺* *   然后一交，直接寄了，原测例在本地跑是true，在牛客判题器跑是null，*   多交几次还超时，恐怕是没充会员，排不上队，想吐槽一下，他喵的一共就三个测例还要冲会员😅😅😅*   不知道又是哪个地方不支持，不管了，反正咱是对的，强迫症想过的小友可以去看看已经过的题解*/// 补全代码let all = document.getElementById("all");let options = document.getElementsByClassName("item");const objToArray = (obj) => Array.from(obj); // 将对象转换为数组const isSelectAll = (options) => options.every((item) => item.checked); // 判断是否全选options = objToArray(options); // options转换为数组all.onchange = () => {// 全选onchange事件options.forEach((item) => {item.checked = all.checked;});};options.forEach((item) => {// 每个item的onchange事件item.onchange = () => {let checked = item.checked;if (checked) all.checked = isSelectAll(options);else all.checked = false;};});//牛客的测例function aaa() {all.checked = true; all.onchange();var result = options.every(x => x.checked) ;  return result; }console.log(aaa());</script></body>
</html>

博客更新不是很及时,需要看后面内容的可以看看我的gitee仓库

牛客JS题Gitee仓库

牛客JS题（三十）全选

最新新闻

热搜词