JavaScript实现全选、反选功能（Vue全选、反选，js原生全选、反选

最后

编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 全选功能：当用户点击一个“全选”复选框时，页面中所有具有相同类名的复选框都将被选中；

• 反选功能：用户点击一个“反选”复选框时，已选中的将变为未选中，未选中的将变为选中。

这里分别用原生JS和Vuejs实现一下

一、JavaScript实现

1、先看效果

2、html部分

<div class="test_checks">
      <h2>JavaScript原生全选、反选功能</h2>
      <input type="checkbox" id="selectAll" /> Select All
      <br />
      <br />
      <input type="checkbox" class="checkbox" /> Item 1
      <br />
      <input type="checkbox" class="checkbox" /> Item 2
      <br />
      <input type="checkbox" class="checkbox" /> Item 3
      <br />
</div>

3、这里首先为selectAll复选框添加了一个change事件监听器，当用户点击该复选框时，将触发该事件；然后在事件处理函数中，通过遍历所有复选框，将它们的选中状态设置为与selectAll复选框相同的状态

document.getElementById("selectAll").addEventListener("change", function () {
    var checkboxes = document.getElementsByClassName("checkbox");
    for (var i = 0; i < checkboxes.length; i++) {
       checkboxes[i].checked = this.checked;
   }
});

4、这里在事件处理函数中，为每个复选框添加了一个change事件监听器。当用户点击某个复选框时，触发该事件。在事件处理函数中，首先设置allChecked变量为true，然后遍历所有复选框，如果发现有复选框没有被选中，将allChecked变量设置为false并跳出循环。最后，将selectAll复选框的选中状态设置为allChecked

    var checkboxes = document.getElementsByClassName("checkbox");
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].addEventListener("change", function () {
        var allChecked = true;
        for (var j = 0; j < checkboxes.length; j++) {
          if (!checkboxes[j].checked) {
            allChecked = false;
            break;
          }
        }
        document.getElementById("selectAll").checked = allChecked;
      });
    }

5、完整代码

  <div class="test_checks">
      <h2>JavaScript原生全选、反选功能</h2>
      <input type="checkbox" id="selectAll" /> Select All
      <br />
      <br />
      <input type="checkbox" class="checkbox" /> Item 1
      <br />
      <input type="checkbox" class="checkbox" /> Item 2
      <br />
      <input type="checkbox" class="checkbox" /> Item 3
      <br />
  </div>


  <script>
    document
      .getElementById("selectAll")
      .addEventListener("change", function () {
        var checkboxes = document.getElementsByClassName("checkbox");
        for (var i = 0; i < checkboxes.length; i++) {
          checkboxes[i].checked = this.checked;
        }
      });

    var checkboxes = document.getElementsByClassName("checkbox");
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].addEventListener("change", function () {
        var allChecked = true;
        for (var j = 0; j < checkboxes.length; j++) {
          if (!checkboxes[j].checked) {
            allChecked = false;
            break;
          }
        }
        document.getElementById("selectAll").checked = allChecked;
      });
    }
  </script>

二、Vue.Js实现

1、先看效果

2、html部分

<div>
  <!-- 全选按钮 -->
  <input
    type="checkbox"
    v-model="checkAllFlag"
    @change="choseCheckAll"
  />
  <!-- 可选项目列表 -->
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <input
        type="checkbox"
        v-model="checkedS"
        :value="item.id"
        @change="ChoseChecks"
      />
      {{ item.name }}
    </li>
  </ul>
</div>

这里为全选按钮绑定一个v-model的checkAllFlag状态，用于存储全选状态；然后为每个可选项目绑定一个v-model的 checkedS属性，它是一个数组，用于存储被选中的项目的ID。

3、然后定义相关的数据类型

data() {
    return {
      checkAllFlag: false,
      checkedS: [],
      items: [
        { id: 1, name: "Item 1" },
        { id: 2, name: "Item 2" },
        { id: 3, name: "Item 3" },
        { id: 4, name: "Item 4" },
      ],
    };
},

4、函数部分

总结

三套“算法宝典”

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注