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 ...
随机推荐
- 杭电 1772 cake
Cake Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- Python学习第二十八课——Django(urls)
Django框架中的urls配置: 首先通过pycharm创建一个Django项目: 例如要写blog的功能:则在digango_lesson中的urls代码如下: """ ...
- 策略模式,重构if-else
最近完成了我们公司的公众号开发,在微信消息路由选择的时候一开始都是用if-else 来判断,后面if-else月写越多显得十分的乱.在网上简单查了一下解决方法,果然有不少干货,感觉最经典最简洁的还是使 ...
- 安装pytorch
安装cpu版本的 conda install pytorch-cpu torchvision-cpu -c pytorch 安装gpu版本的 conda install pytorch torchvi ...
- javaweb项目中web.xml配置文件的/和/*的区别
1.拦截"/",可以实现现在很流行的REST风格.很多互联网类型的应用很喜欢这种风格的URL.为了实现REST风格,拦截了所有的请求.同时对*.js,*.jpg等静态文件的访问也就 ...
- Kali 2020.1 默认密码不是toor
官方2020年一月28日的文章中指出root/toor is dead. Long live kali/kali. 登录用户名和密码是kali:kali 但是虚拟机镜像下载页面没有及时更新,仍然提示登 ...
- poj1988 Cube Stacking(并查集
题目地址:http://poj.org/problem?id=1988 题意:共n个数,p个操作.输入p.有两个操作M和C.M x y表示把x所在的栈放到y所在的栈上(比如M 2 6:[2 4]放到[ ...
- selenium webdriver 实例化浏览器对象
public static FirefoxDriver FFSetting() { System.setProperty("webdriver.firefox.bin", &quo ...
- PAT T1004 To Buy or Not to Buy - Hard Version
暴力搜索加剪枝~ #include<bits/stdc++.h> using namespace std; ; string t; string s[maxn]; int pos[maxn ...
- 吴裕雄--天生自然ORACLE数据库学习笔记:常用SQL*Plus命令
set pause on set pause '按<enter>键继续' select user_id,username,account_status from dba_users; sh ...