这是一个组件:

<template>
<div>
<div>
<input type="checkbox" v-model="isCheckAll" @change="checkedAll"> 全选/取消全选
<input type="checkbox" v-model="isCheckInverse" @change="checkedInverse"> 反选/取消反选
</div>
<div v-for="(list, index) in checkboxLists">
<input type="checkbox" v-model="checkedLists" :value="list.id"> {{ list.product_name }}
</div>
<div>全选/反选 状态:{{ isCheckAll }}</div>
<div>选中列表:{{ checkedLists }}</div>
</div>
</template> <script>
export default {
data () {
return {
// 总数据
checkboxLists: [
{
id: ,
product_name: '银手链'
},
{
id: ,
product_name: '银手镯'
},
{
id: ,
product_name: '银耳环'
}
],
// 是否全选
isCheckAll: false,
// 是否反选
isCheckInverse: false,
// 选中列表
checkedLists: []
}
},
methods: {
// 全选/取消全选
checkedAll () {
// 初始化反选/取消反选
this.isCheckInverse = false
// 判断 全选/反选 是否点击
if (this.isCheckAll) {
let arr = []
// 循环全部数据并push到一个数组中
this.checkboxLists.forEach(element => {
arr.push(element.id)
});
// 选中列表赋值,此时的arr已经是全部数据了,直接赋值就等于选中所有checkbox
this.checkedLists = arr
} else {
// 如果 全选/反选 为假,则选中列表初始化
this.checkedLists = []
}
},
// 反选/取消反选
checkedInverse () {
// 这里不能直接用this.xxx赋值,具体参考https://www.cnblogs.com/nonsec/p/9322359.html
let tempArr = JSON.parse(JSON.stringify(this.checkboxLists))
let arr = []
var obj = {} // 先循环已勾选的,赋值给对象,对象key和value都为勾选的值
for (const i in this.checkedLists) {
obj[this.checkedLists[i]] = this.checkedLists[i]
} // 循环总的,然后判断上面对象的属性是否存在,如果存在则加入数组
for (const j in tempArr) {
if (!obj.hasOwnProperty(tempArr[j].id)) {
arr.push(tempArr[j].id)
}
} // 最后赋值,实现反选/取消反选功能
this.checkedLists = arr
}
},
watch: {
// 监听选中列表属性,当选中列表发生变化时,会运行此方法
checkedLists (newValue, oldValue) {
// 每次运行时,判断当前选中列表中的数组个数是否等于全部数据的数组个数,如果到某一时刻全等,则全选按钮为选中
if (newValue.length === this.checkboxLists.length) {
this.isCheckAll = true
} else {
// 否则为全不选
this.isCheckAll = false
}
}
}
}
</script>

Vue 全选/取消全选,反选/取消反选的更多相关文章

  1. vue实现功能 单选 取消单选 全选 取消全选

    vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...

  2. python: jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

  3. js jqery判断checkbox是否选中,全选,取消全选,反选,选择奇数偶数项

    // 一,判断选中 // js var ischecked2 = function(){ // this.checked == true $(document.getElementsByTagName ...

  4. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  5. vue全选和取消全选

    代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. 使用AngularJS实现简单:全选和取消全选功能

    这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: < ...

  7. 点击div全选中再点击取消全选div里面的文字

    想做一个就是点击一个div然后实现的功能是div里面的文字都成选中状态,然后就可以利用浏览器的自带的复制功能,任意复制在哪里去了 在网上百度了一下 然后网上的答案感觉很大的范围 然后一些搜索 然后就锁 ...

  8. Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例

    <input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...

  9. jQuery--checkbox全选/取消全选

    用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...

随机推荐

  1. (技能篇)Mysql在linux下的全量热备份

    相关命令: #创建备份目录 mkdir -p /mysqlbackup #进入创建的备份目录中 cd /mysqlbackup #如果mysql运行在mysql用户和用户组下面,root表示用户,my ...

  2. Spring杂谈 | Spring中的AutowireCandidateResolver

    接口定义 用于推断一个特定的beanDefinition是否能作为指定依赖的候选者的策略接口 public interface AutowireCandidateResolver { // 默认情况下 ...

  3. 【Spark】这一篇或许能让你大概了解如何通过JavaAPI实现DataFrame的相关操作

    文章目录 需求概述 步骤 一.创建Maven工程并导包 二.选用第一种方法:利用反射机制配合样例类构建DataFrame 开发代码 选用第二种方法:通过StrucType配合Row构建DataFram ...

  4. 【HBase】表模型和基本操作介绍

    目录 HBase表模型 常用Shell操作 HBase表模型 创建一个hbase表,必须要有表名和列族名 列族 -- columnFamily,就是上图中的Column Family1 userInf ...

  5. Spring中bean的四种注入方式

    一.前言   最近在复习Spring的相关内容,这篇博客就来记录一下Spring为bean的属性注入值的四种方式.这篇博客主要讲解在xml文件中,如何为bean的属性注入值,最后也会简单提一下使用注解 ...

  6. Mysql常用sql语句(13)- having 过滤分组结果集

    测试必备的Mysql常用sql语句,每天敲一篇,每次敲三遍,每月一循环,全都可记住!! https://www.cnblogs.com/poloyy/category/1683347.html 前言 ...

  7. Luogu P5603 小C与桌游【贪心+拓扑排序】

    [Description]https://www.luogu.com.cn/problem/P5603 \(\;\) 题意可以简化为:一个不保证联通,n个点,m条边的DAG(有向无环图),构造一个拓扑 ...

  8. webservice初级

    在学习webservice的时候,经常将ns和url花了好久时间才理解过来,这里备份下! 首先定义接口: @WebService public interface IService { @WebRes ...

  9. HttpRequestUtils post get请求

    package com.nextjoy.projects.usercenter.util.http; /** * Created by Administrator on 2016/10/20. */ ...

  10. linux下安装gmp遇到 configure:error:no usable m4 in$path or /user/5bin解决方案

    安装过程中遇到如下报错: 上面的报错是因为你没有安装m4,安装m4就可以了:以下两种命令人选其一: #yum install m4 或 #apt-get install m4 ps:如果遇到权限问题就 ...