全選&全不選

html:

<div class="msg-position c-bg-wt"><p class="msg-position-p">推送崗位<i class="c-rd">*</i>&nbsp;&nbsp;&nbsp;&nbsp;<span><i class="icon-span" :class="{'icon-span-select' : chkAllStatus, 'brand-btn': chkAllStatus, 'brand-b': chkAllStatus}" @click="chkAll"></i></span> 全部</p><div v-for="item in positions" class="msg-position-div hidden"><p ><i @click="chkPosition(item)" class="icon-span" :class="{'icon-span-select' : item.isActive, 'brand-btn': item.isActive, 'brand-b': item.isActive}"></i>{{item.positionName}}</p></div></div>

前提：

positions:[],// 頁面崗位展示 chkPositions:[],// 選擇崗位 chkAllStatus: false, // 默認(rèn)全不選

（1）點(diǎn)擊全選時，遍歷數(shù)組this.positions，去改變它的每一個項(xiàng)（val）狀態(tài)（isActive）；

（2）若被選中，即 所有項(xiàng)，val.isActive=true時，然后用另一個數(shù)組this.chkPositions存起來；

? ? ? 注：（2）在push之前一定要先清空數(shù)組

（3）若未被選中，即 所有項(xiàng)，val.isActive=false時，然后在數(shù)組this.chkPositions移除此項(xiàng)。

注：this.chkPositions是要傳到后臺的字段，而this.chkAllStatus會控制頁面上全選是否被選中，如下：

VUEJS:

// 選擇崗位(全選&全不選)chkAll(){this.chkAllStatus = this.chkAllStatus == true ? false : true;if(this.chkAllStatus){this.chkPositions = []; // 清空數(shù)組，不然每一次push，都會在原有基礎(chǔ)上pushthis.positions.map((val, index, arr) => {val.isActive = true;this.chkPositions.push(val.positionCode);return val;});}else{this.positions.map((val, index, arr) => {val.isActive = false;if (this.chkPositions.indexOf(val.positionCode) > -1) {this.chkPositions.splice(this.chkPositions.indexOf(val.positionCode), 1);}return val;});}},

點(diǎn)擊單個選項(xiàng)時：

（1）點(diǎn)擊時，改變選中狀態(tài)，item.isActive = item.isActive == true ? false : true;

（2）若被選中，即item.isActive=true時，然后用另一個數(shù)組this.chkPositions存起來；

（3）若未被選中，即item.isActive=false時，然后在數(shù)組this.chkPositions移除此項(xiàng)。

注：this.chkPositions是要傳到后臺的字段，當(dāng)item.isActive存在false時，全選狀態(tài)為false，所以

this.chkAllStatus = false要指出，如下： // 選擇崗位chkPosition(item){item.isActive = item.isActive == true ? false : true;if(item.isActive){this.chkPositions.push(item.positionCode);// 當(dāng)選中所有崗位時，全選打鉤this.chkAllStatus = this.chkPositions.length == this.positions.length ? true : false;console.log('選擇崗位',this.chkPositions)}else{let index = this.chkPositions.indexOf(item.positionCode);if (index > -1) {this.chkPositions.splice(index, 1);}this.chkAllStatus = false;console.log('取消崗位',this.chkPositions)}},

效果圖：

?后記

哈哈，想看復(fù)選框樣式請移步《CSS自定義checkBox復(fù)選框- 對勾樣式》

總結(jié)

以上是生活随笔為你收集整理的VUEJS-checkbox全选全不选的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。