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复选框- 对勾样式》