脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript全选反选

JavaScript实现全选与反选功能

 更新时间：2024年04月03日 09:35:33   作者：北城笑笑  
这篇文章主要为大家详细介绍了如何分别使用Vue和JavaScript实现全选与反选功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下

简介

在JavaScript中，实现全选和反选通常是通过操作DOM元素和事件监听来实现；

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

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

这里分别用原生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、函数部分

  methods: {
    choseCheckAll() {
      this.checkedS = this.checkAllFlag
        ? this.items.map((item) => item.id)
        : [];
    },
    ChoseChecks(value) {
      if (this.checkAllFlag && value) {
        this.checkAllFlag = false;
      } else if (
        !this.checkAllFlag &&
        this.checkedS.length === this.items.length &&
        value
      ) {
        this.checkAllFlag = true;
      }
    },
  },

这里为全选按钮的@change事件choseCheckAll，该方法根据全选状态更新所有项目的选中状态。
每个可选项目的@change事件触发一个方法（如 ChoseChecks），用于更新全选状态，当所有项目都被选中或取消选中时，全选按钮的状态应相应改变。

5、注意事项

choseCheckAll 方法：

  • 当全选按钮被选中时，将所有项目的ID（this.items.map(item => item.id)）赋值给 checkedS，实现全选。
  • 当全选按钮被取消选中时，将 checkedS 设置为空数组，取消所有项目的选中状态。

ChoseChecks 方法：

  • 当全选按钮已选中且某个项目被取消选中时，将 checkAllFlag 设置为 false，表示不再全选。
  • 当全选按钮未选中，且当前选中的项目数量等于总项目数减一，且有新的项目被选中时，将 checkAllFlag 设置为 true，表示所有项目已被选中。这里的条件判断是为了避免在勾选最后一个未选中项时触发两次ChoseChecks，导致checkAllFlag被错误地重置。

6、完整代码

  <div class="test_checks">
 
    <input
      type="checkbox"
      v-model="checkAllFlag"
      @change="choseCheckAll"
    /><span class="checkll_dom">全选</span>
 
    <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>
 
  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" },
      ],
    };
  },
 
  methods: {
    choseCheckAll() {
      this.checkedS = this.checkAllFlag
        ? this.items.map((item) => item.id)
        : [];
    },
    ChoseChecks(value) {
      if (this.checkAllFlag && value) {
        this.checkAllFlag = false;
      } else if (
        !this.checkAllFlag &&
        this.checkedS.length === this.items.length &&
        value
      ) {
        this.checkAllFlag = true;
      }
    },
  }

以上就是JavaScript实现全选与反选功能的详细内容，更多关于JavaScript全选反选的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • promise结合requestAnimationFrame用法示例

    promise结合requestAnimationFrame用法示例

    这篇文章主要为大家介绍了promise结合requestAnimationFrame用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • JS上传前预览图片实例

    JS上传前预览图片实例

    上传图片对图片进行一下预览，可以了解图片上传后大概会是什么样子，此功能用js实现，然后在fileupload控件的change事件中调用，这样当用fileupload选择完图片以后，图片就会自动显示出来了。功能很简单，却很实用。
    2013-03-03
  • JS跨域交互(jQuery+php)之jsonp使用心得

    JS跨域交互(jQuery+php)之jsonp使用心得

    JSON是一种基于文本的数据交换方式，或者叫做数据描述格式，这篇文章主要介绍了JS跨域交互(jQuery+php)之jsonp使用心得的相关资料，非常不错，具有参考借鉴价值，需要的朋友一起学习吧
    2016-07-07
  • 解析John Resig Simple JavaScript Inheritance代码

    解析John Resig Simple JavaScript Inheritance代码

    上网也查了一下对些的理解说的都不是很清楚. 在翻阅的同时找到了一篇 分析这篇文章的文章 哈哈 分析的很详细. (Join Resig 大师的 "Simple Inheritance" 使用了很多有意思的技巧) 如果你有时间, 并对此感兴趣不访好好看看. 我相信多少会有所收益的.
    2012-12-12
  • javascript suggest效果 自动完成实现代码分享

    javascript suggest效果 自动完成实现代码分享

    像百度与google，当我们往搜索框输入东西时就会出现一排列表提示用户有什么热门或适合的候选词，这种效果就叫suggest。本文将一步步教你如何设计它
    2012-02-02
  • js模拟淘宝网的多级选择菜单实现方法

    js模拟淘宝网的多级选择菜单实现方法

    这篇文章主要介绍了js模拟淘宝网的多级选择菜单实现方法,涉及javascript针对页面元素结点的遍历与设置等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • bootstrap table表格客户端分页实例

    bootstrap table表格客户端分页实例

    这篇文章主要为大家详细介绍了bootstrap table表格客户端分页实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • BootStrap数据表格实例代码

    BootStrap数据表格实例代码

    本文通过实例代码给大家分享了BootStrap数据表格的相关知识，感兴趣的朋友一起看看吧
    2017-09-09
  • JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    JS+CSS实现鼠标滑过时动态翻滚的导航条效果

    这篇文章主要介绍了JS+CSS实现鼠标滑过时动态翻滚的导航条效果,涉及JavaScript动态设置css样式动画过度效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • 基于JavaScript构建一个动态博客应用

    基于JavaScript构建一个动态博客应用

    这篇文章主要为大家详细介绍了如何基于JavaScript构建一个动态博客应用,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02

最新评论