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 ...
随机推荐
- MQTT Web Toolkit - MQTT 在线客户端及服务器测试
MQTT Web Toolkit 是 EMQ 最近开源的一款 MQTT (WebSocket) 测试工具,支持线上 (tools.emqx.io) 访问使用.该工具采用了聊天界面形式,简化了页面操作逻 ...
- 02-11Android学习进度报告十一
今天我学习了BaseAdapter优化的知识,主要是View方面的优化. 首先是复用复用ConvertView 代码示例: @Override public View getView(int posi ...
- 【读书笔记】图解HTTP完整流程
1.1 使用 HTTP 协议访问 Web: 根据 Web 浏览器地址栏中指定的URL,从服务端获取资源等信息,在页面上展示. Web 使用一种 HTTP (超文本传输协议)作为规范,完成从客户端到服务 ...
- 【网摘】JS 或 jQuery 获取当前页面的 URL 信息
1.设置或获取对象指定的文件名或路径. window.location.pathname 2.设置或获取整个 URL 为字符串. window.location.href 3.设置或获取与 URL 关 ...
- python 之并发编程更新版进程池与进程池比较与回调函数
一.更新版进程池与进程池比较 from concurrent.futures import ProcessPoolExecutor, ThreadPoolExecutor import os, tim ...
- rc
1,协同过滤. 2,协方差:用来衡量,他们的变化趋势是不是一致的. 3,皮尔逊相关系数:-1,负相关.1:正相关. 4,用皮尔逊相关系数来算相关性是最多的.
- 七 Struts2访问Servlet的API方式二:原生方式
Struts2访问Servlet的API方式二:原生方式 和解耦合的方式不同,原生方式既可以拿到域对象,也可以调用域对象中的方法 前端jsp: <%@ page language="j ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:设定文本小写
<!DOCTYPE html> <html> <head> <title>菜鸟教程(runoob.com)</title> <meta ...
- linux--用户管理--useradd
用户分类 1 root 超级管理员 2 系统用户 就是 某一个服务中 自动产生的用户 不是认为创建的,不能用于登录计算机 只是保证某一个服务的正常运行 比如数据库 3 普通用户 用户必须属于一个且只有 ...
- 更新Android Studio,提示后直接点更新即可。gradle 两种更新方法,我用的第二种:手动添加gradle
直接更新即可. 更新完毕后,随即会让你更新gradle,但是会一直更新一直更新...... 解决方法: 第一种方法: 手动下载Android Studio 对应的 gradle版本,然后设置一下即可. ...