JavaScript实现全选、反选功能(Vue全选、反选,js原生全选、反选)

简介:

  • 在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 方法:

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

ChoseChecks 方法:

  1. 当全选按钮已选中且某个项目被取消选中时,将 checkAllFlag 设置为 false,表示不再全选。
  2. 当全选按钮未选中,且当前选中的项目数量等于总项目数减一,且有新的项目被选中时,将 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;
      }
    },
  },

创作不易,感觉有用,就一键三连,感谢(●'◡'●)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/511483.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

蓝桥杯刷题-四平方和

四平方和 代码&#xff1a; from copy import deepcopy n int(input()) maxn int(5e6) 10 dic dict() for a in range(maxn):if a * a > n:breakfor b in range(a,maxn):if a * a b * b > n:breakif dic.get(a*ab*b) is None:dic[a*ab*b] (a,b) ans [maxn for _ …

klipper源码分析之TMC步进电机驱动

步进电机驱动芯片常用的有tmc2208和tmc2209&#xff0c;这2种芯片都支持STEP/DIR模式和UART单线模式&#xff0c;STEP/DIR模式比较简单&#xff0c;软件无法动态修改寄存器&#xff0c;而UART模式可以修改。这2种模式printer.cfg配置也不一样&#xff0c;更多的参考请查看官方文…

Transformer - Positional Encoding 位置编码 代码实现

Transformer - Positional Encoding 位置编码 代码实现 flyfish import torch import torch.nn as nn import torch.nn.functional as F import os import mathclass PositionalEncoding(nn.Module):def __init__(self, d_model, dropout, max_len5000):super(PositionalEnco…

ArcGis研究区边界提取

ArcGis研究区边界提取 *0* 引言*1* 有的步骤0 引言 GRACE数据处理前要先确定研究范围,而大多情况下所选的研究区都是有特殊意义的,比如常年干旱、经济特区、降水丰富等,这些区域往往有精确的边界,那就要从大的区块中将研究范围抠出来,获取相应坐标,以量化区域重力变化。那…

基于MiniExcel的三种常用导出Excel方法(固定列导出、动态列导出、按模板导出)

为了方便代码编写和测试&#xff0c;把很多代码都放在一个class里面&#xff0c;实际开发根据需要放到对应的目录下即可。 1.使用nuget下载安装miniexcel&#xff1b; 2.编写对应的测试接口&#xff0c;具体代码如下: using Microsoft.AspNetCore.Authorization; using Micr…

etcdctl配置

下载etcdctl压缩文件 wget https://github.com/etcd-io/etcd/releases/download/v3.5.0/etcd-v3.5.0-linux-amd64.tar.gztar -xvf etcd-v3.5.0-linux-amd64.tar.gzsudo mv ./etcd-v3.5.0-linux-amd64/etcdctl /usr/local/bin/ chmod x /usr/local/bin/etcdctl 配置etcdctl 配…

路由器拨号失败解决方法

目录 一、遇到问题 二、测试 三、解决方法 &#xff08;一&#xff09;路由器先单插wan口设置 &#xff08;二&#xff09;mac地址替换 &#xff08;三&#xff09;更改路由器DNS 一、遇到问题 1 .在光猫使用桥接模式&#xff0c;由路由器进行拨号的时候&#xff0c;出现…

网络播放解码器 SIP-7102网络音频解码播放器

网络播放解码器 SIP-7102网络音频解码播放器 SIP-7102是一款支持SIP协议的网络音频解码播放器&#xff0c;具有10/100M以太网接口&#xff0c;其接收网络的音频数据&#xff0c;通过设备的DSP及放大电路&#xff0c;可以直接连接两路15W的扬声器。可以用于公共广播、报警系统、…

CSS 清除浮动

浮动副作用 当元素设置float浮动后&#xff0c;该元素就会脱离文档流并向左/向右浮动。浮动也会产生一些问题&#xff0c;所以在使用的时候还需要清除浮动&#xff0c;这样操作起来还是很麻烦的&#xff0c;在没有浮动的时候就不要乱使用&#xff0c;因为还需要清除掉&#xff…

windows系统kafka小白入门篇——下载安装,环境配置,入门代码书写

目录 1. kafka 下载 2. 修改配置文件 2.1 文件夹内容 2.2 创建一个 data 空文件夹 2.3 修改 zookeeper.properties 配置文件 2.4 修改 server.properties 配置文件 2.5 创建 "zk.cmd" windows脚本文件 2.6 创建 "kfk.cmd" windows脚本文件 3. 启动…

docker搭建CI/CD环境配置过程中的常见问题

一、Jenkins 1、pull镜像问题 docker pull jenkins/jenkins:lts Using default tag: latest Trying to pull repository docker.io/library/centos ... Get https://registry-1.docker.io/v2/library/centos/manifests/latest: Get https://auth.docker.io/token?scoperepo…

小剧场短剧影视小程序源码,附带系统搭建教程

安装教程 linux/win任选 PHP版本&#xff1a;7.3/7.2&#xff08;测试时我用的7.2要安装sg扩展 不会的加QQ295526639&#xff09; 批量替换域名http://video.owoii.com更换为你的 批量替换域名http://120.79.77.163:1更换为你的 这两个都替换你的 /extend/yzf/lib/epay.config.…

论文笔记 - :DIGGING INTO OUTPUT REPRESENTATION FOR MONOCULAR 3D OBJECT DETECTION

Title: 深入研究单目 3D 物体检测的输出表示 Abstract 单目 3D 对象检测旨在从单个图像中识别和定位 3D 空间中的对象。最近的研究取得了显着的进展&#xff0c;而所有这些研究都遵循基于 LiDAR 的 3D 检测中的典型输出表示。 然而&#xff0c;在本文中&#xff0c;我们认为…

分享OpenTiny总结VUE目录结构

OpenTiny总结VUE目录结构&#xff0c;在设计规范和基础组件的基础上&#xff0c; 继续向上构建&#xff0c;提炼出典型模板/业务组件/配套设计资源&#xff0c;进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。 Vue 项目目录结构 ├── node_modules…

js实现websocket断线重连功能

在项目开发中我们可能经常要使用websocket技术&#xff0c;当连接发生断线后&#xff0c;如果不进行页面刷新将不能正常接收来自服务端的推送消息。为了有效避免这种问题&#xff0c;我们需要在客户端做断线重连处理。当网络或服务出现问题后&#xff0c;客户端会不断检测网络状…

ubuntu-server部署hive-part3-安装mysql

参照 https://blog.csdn.net/qq_41946216/article/details/134345137 操作系统版本&#xff1a;ubuntu-server-22.04.3 虚拟机&#xff1a;virtualbox7.0 部署mysql 下载上传 下载地址 https://downloads.mysql.com/archives/community/ 以root用户上传&#xff0c;/usr/loc…

Transformer模型-softmax的简明介绍

今天介绍transformer模型的softmax softmax的定义和目的&#xff1a; softmax&#xff1a;常用于神经网络的输出层&#xff0c;以将原始的输出值转化为概率分布&#xff0c;从而使得每个类别的概率值在0到1之间&#xff0c;并且所有类别的概率之和为1。这使得Softmax函数特别适…

利用IP地址判断羊毛用户:IP数据云提供IP风险画像

在当今数字化社会&#xff0c;互联网已经成为人们日常生活和商业活动中不可或缺的一部分。然而&#xff0c;随着网络的普及&#xff0c;网络欺诈行为也日益猖獗&#xff0c;其中包括了羊毛党这一群体。羊毛党指的是利用各种手段获取利益、奖励或者优惠而频繁刷取优惠券、注册账…

微信小程序自定义弹窗组件

业务背景&#xff1a;弹窗有时字体较多&#xff0c;超过7个字&#xff0c;不适用wx.showToast. 组件代码 <view class"toast-box {{isShow? show:}}" animation"{{animationData}}"><view class"toast-content" ><view class&q…

【FTP,EMail】

文章目录 FTPFTP&#xff1a;文件传输协议FTP: 控制连接与数据连接分开FTP命令、响应 EMail电子邮件&#xff08;EMail&#xff09;邮件服务器EMail: SMTP [RFC 2821]SMTP&#xff1a;总结 FTP FTP&#xff1a;文件传输协议 向远程主机上传输文件或从远程主机接收文件。客户/服…