VUEJS-checkbox全選&全不選

全選&全不選

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, // 默認全不選

（1）點擊全選時，遍歷數組this.positions，去改變它的每一個項（val）狀態（isActive）；

（2）若被選中，即 所有項，val.isActive=true時，然後用另一個數組this.chkPositions存起來；

      注：（2）在push之前一定要先清空數組

（3）若未被選中，即 所有項，val.isActive=false時，然後在數組this.chkPositions移除此項。

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

VUEJS:

   // 選擇崗位(全選&全不選)
    chkAll(){
      this.chkAllStatus = this.chkAllStatus == true ? false : true;
      if(this.chkAllStatus){
        this.chkPositions = [];  // 清空數組，不然每一次push，都會在原有基礎上push
        this.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;
        });
      }
    },

點擊單個選項時：

（1）點擊時，改變選中狀態，item.isActive = item.isActive == true ? false : true;

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

（3）若未被選中，即item.isActive=false時，然後在數組this.chkPositions移除此項。

注：this.chkPositions是要傳到後臺的字段，當item.isActive存在false時，全選狀態爲false，所以

this.chkAllStatus = false要指出，如下：

 // 選擇崗位
    chkPosition(item){
      item.isActive =  item.isActive == true ? false : true;
      if(item.isActive){
        this.chkPositions.push(item.positionCode);
        // 當選中所有崗位時，全選打鉤
        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)
      }
    },

效果圖：

 後記

哈哈，想看複選框樣式請移步《CSS自定義checkBox複選框- 對勾樣式》