JS实现全选,取消全选,正常选择
//点击选择方法
onUserIdsChange(selVal) {
if (this.form.groupUserIds.includes(-1) && !this.isSelectAll) {
// 全选
this.nickNames = []
this.isSelectAll = true
this.form.groupUserIds = []
this.groupUserOption.forEach(item => {
item.value != -1 && this.form.groupUserIds.push(item.value)
if(this.form.groupUserIds.length !== 0 && item.subscribe !== true){
this.onShow = true
this.nickNames.push(item.label)
}
})
this.groupUserOption[0].label = '取消全选'
} else if (this.isSelectAll && this.form.groupUserIds.includes(-1)) {
**// 取消全选**
this.isSelectAll = false
this.groupUserOption[0].label = '全选'
this.form.groupUserIds = []
this.onShow = false
this.nickNames = []
} else {
**// 正常选择**
this.nickNames = []
this.form.groupUserIds = selVal
if(this.form.groupUserIds.length === this.groupUserOption.length - 1){
this.groupUserOption[0].label = '取消全选'
}else{
this.groupUserOption[0].label = '全选'
}
if(this.form.groupUserIds.length !== 0){
this.groupUserOption.forEach(item2 => {
this.form.groupUserIds.forEach(item => {
if(item2.value === item && item2.subscribe !== true){
this.onShow = true
this.nickNames.push(item2.label)
}else if(item2.value === item && item2.subscribe === true){
this.onShow = false
}
})
})
}
else{
this.onShow = false
this.nickNames = []
}
}
}
},
JS实现全选,取消全选,正常选择的更多相关文章
- jQuery--checkbox全选/取消全选
用JavaScript使页面上的一组checkbox全选/取消全选,逻辑很简单,实现代码也没有太难的语法.但使用jQuery实现则更简单,代码也很简洁,精辟! jQuery版本:1.3.2 <h ...
- AngularJS--购物车全选/取消全选功能实现
刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- html checkbox 实现全选/取消全选
html checkbox 实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...
- 【转载】checkbox实现全选/取消全选
比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...
- Jquery CheckBox复选框 全选/取消全选 最佳实现方式 参考案例
<input id="chkAll" type="checkbox" />全选/取消全选</div> <asp:Repeater ...
- checkbox全选/取消全选
//checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...
- Vue 全选/取消全选,反选/取消反选
这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...
- vue实现功能 单选 取消单选 全选 取消全选
vue实现功能 单选 取消单选 全选 取消全选 代码部分 <template> <div class=""> <h1>全选框</h1> ...
- jquery checkbox勾选取消勾选的诡异问题
jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form> 你爱好的运动是?<input type=&q ...
随机推荐
- [python]python中的一些包以及他们的基本用处和安装
pika可以用来连接rabbitmqpip install pika -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com ...
- JavaScript - Array对象,数组
1. 创建数组 方式1. new关键字 var arr = new Array(1, 2, 3); 方式2. 使用字面量创建数组对象 var arr = [1, 2, 3]; 2. 检测一个对象是否是 ...
- 输入url到展示页面过程发生了什么?
输入网址,首先在书签或者历史记录里面去搜索相关的网址推荐给你 浏览器查找域名的IP的地址(在hosts文件有没有对应IP -> 浏览器发出一个DNS请求到本地DNS服务器,本地服务器一般是网 ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- C++11常用特性介绍——auto类型修饰符
1.C++11常用特性介绍 从本篇开始介绍C++11常用特性,大致分:关键字及新语法.STL容器.多线程.智能指针内存管理,最后讲一下std::bind和std::function 二.关键字和新语法 ...
- MCM(矩阵链乘法)
这是<算法导论>动态规划中的一个问题.问题简述如下:我们在求解矩阵相乘时通常会有一个最优括号方案来对矩阵进行顺序相乘,这样会减少大量的计算时间. 我们知道矩阵A.B相乘,只能是当矩阵A的列 ...
- Mysql ,用户管理命令
添加用户.删除用户与授权以下对数据库的操作完全可以利用管理软件完成,比如在Navicat上进行操作,对数据库进行用户和权限管理. 1.创建用户:以root用户登录到数据库进行用户创建 命令: CREA ...
- 34 java 文件过滤 FileFilter
package com.da.tool.util; import org.apache.commons.io.filefilter.RegexFileFilter; import java.io.Fi ...
- C++的注册和回调
注册回调的作用 在设计模式中注册回调的方式叫做回调模式.在SDK开发中,为增强开发者的SDK通用性,排序或者一些算法逻辑需要使用者进行编写.这时候就需要向SDK传递回调函数.注册回调能使下层主动与上层 ...
- 「POJ1734」Sightseeing trip
「POJ1734」Sightseeing trip 传送门 这题就是要我们求一个最小环并且按顺序输出一组解. 考虑 \(O(n^3)\) 地用 \(\text{Floyd}\) 求最小环: 考虑 \( ...