牛客JS题（三十）全选

代码对我眨眼睛

已于 2024-08-08 22:01:45 修改

阅读量1.2k

点赞数 33

分类专栏： # JavaScript 文章标签： javascript 前端刷题 js进阶

于 2024-08-08 16:30:00 首次发布

本文链接：https://blog.csdn.net/m0_73756108/article/details/141023495

版权

JavaScript 专栏收录该内容

59 篇文章 0 订阅

订阅专栏

注释很详细，直接上代码

涉及知识点：

全选逻辑判断
性能优化

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

我的答案

<!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>