//点击选择方法

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实现全选,取消全选,正常选择的更多相关文章

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

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

  2. AngularJS--购物车全选/取消全选功能实现

    刚学习angularJS,于是练习写了一个类似于购物车的全选/取消全选的功能,主要实现的功能有: 1.勾选全选checkbox,列表数据全部被勾选,取消同理,用ng-model实现双向绑定: 2.选中 ...

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

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

  4. html checkbox 实现全选/取消全选

    html checkbox  实现全选/取消全选 <html> <body> <table border="1"> <tr> < ...

  5. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

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

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

  7. checkbox全选/取消全选

    //checkbox全选/取消全选 $(function() { $("#checkAll").click(function() { if(this.checked){ $(&qu ...

  8. Vue 全选/取消全选,反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

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

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

  10. jquery checkbox勾选取消勾选的诡异问题

    jquery checkbox勾选/取消勾选的诡异问题jquery checkbox勾选/取消勾选的诡异问题 <form>        你爱好的运动是?<input type=&q ...

随机推荐

  1. inline-block,真的懂吗

    曾几何时,display:inline-block 已经深入「大街小巷」,随处可见 「display:inline-block; *display:inline; *zoom:1; 」这样的代码.如今 ...

  2. 第一节:Vuejs入门之各种指令

    一. 简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上 ...

  3. 如何确认 fastboot unlock 解锁成功,如何确认DM-verity 已关闭

    如何确认 fastboot unlock 解锁成功 1.fastboot 模式下按音量上键后是否提示 Unlock Pass...return to fastboot in 3s 2.重启后界面是否显 ...

  4. Verilog状态机

    以1011为例 代码如下: //1011(Meay型) module state1(clk,in,rst_n,out); input clk; input rst_n; input in; outpu ...

  5. java集合体系结构总结

    好,首先我们根据这张集合体系图来慢慢分析.大到顶层接口,小到具体实现类. 首先,我想说为什么要用集合?简单的说:数组长度固定,且是同种数据类型.不能满足需求.所以我们引入集合(容器)来存储任意数据类型 ...

  6. 六 Spring属性注入的四种方式:set方法、构造方法、P名称空间、SPEL表达式

    Spring的属性注入: 构造方法的属性注入 set方法的属性注入

  7. 1009 Product of Polynomials (25分) 多项式乘法

    1009 Product of Polynomials (25分)   This time, you are supposed to find A×B where A and B are two po ...

  8. 随机游走模型(Random Walk)

    给定了一个时间顺序向量\(z_1,...,z_T\),rw模型是由次序r来定义的,\(z_t\)仅取决于前\(t-r\)个元素.当r = 1时为最简单的RW模型. 给定了向量的其他元素,\(z_t\) ...

  9. CentOS 下的apache服务器配置与管理

    一.WEB服务器与Apache1.web服务器与网址 2.Apache的历史 3.补充http://www.netcraft.com/可以查看apache服务器的市场占有率同时必须注意的是ngnix, ...

  10. Tensorflow机器学习入门——网络可视化TensorBoard

    一.在代码中标记要显示的各种量 tensorboard各函数的作用和用法请参考:https://www.cnblogs.com/lyc-seu/p/8647792.html import tensor ...