vue中checkbox 样式自定义重写；循环遍历checkbox,拿到不同的v-model绑定值；及获取当前checked 状态，全选和全不选等功能。

开始写这个功能，不得不吐槽原始的checkbox,灰色小方块的丑陋，虽说eleUI,mintUI，等各种框架的单复选框已经对其优化，但还是不想要这种。那我们就来研究一下怎么处理它。

 <section class="box">
     <label  :for="item3" @click="chooseType($event,index3)"  v-for="(item3,index3) in type"  class="labelName">
        <input type="checkbox" :value="item3" :id="item3" v-model="checkedValue" class="checkboxList">            // for属性一定要与id一致，原因请看上图
        <div class="name">{{item3}}</div>  // label的值            // checkbox的v-model绑定值一定要是数组
        &nbsp;&nbsp;
        {{checkedValue}}   // 查看值
     </label>
     <button @click="chooseQu">全选</button>
     <button @click="chooseNo">全不选</button>

  </section>

 data: 

data(){
        return{
          checkedValue: [],
          type:['a','b','c','d']   // 测试数据，可在mounted钩子函数中将后台数据赋值
        }
},

methods:

methods:{
        chooseType(e,val){
          console.log(e.target.checked)   // 可获取当前的checked 状态
          console.log(val)                // 可获取到当前的下标。

        },
        chooseQu(){
          // document.querySelectorAll('.checkboxList').setAttribute("checked","true");
          this.checkedValue = this.type ;  //将原数据全部赋值给checkedValue,全部置为true.  
        },
        chooseNo(){
          this.checkedValue = [] ;    // checkedValue 为空即将checkedValue全部置为false,
        }

  }

样式的调整：

// 样式可根据自己的需要，通过控制外层div自行配置，
.box{
  /*display: flex;*/
  /*justify-content: start;*/
  /*align-items: center;*/
}

.labelName{
   25%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/*------新-----*/
  input[type=checkbox] {
     20px;                  // 可根据自己的需要进行配置input的大小。
    height: 20px;
    border-radius: 10px;
    -webkit-appearance: none;
    background-color: transparent;
    border: 0;
    outline: 0 !important;
    color: #d8d8d8;
    position: relative;
  }
  input[type=checkbox]:before{
    content: "";
    display:block;
     20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    box-sizing:border-box;
    position: absolute;
  }

  input[type=checkbox]:disabled:before{
    content: "";
    display:block;
     20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #333;
    background-color: #333;
    box-sizing:border-box;                     // 可控制调整背景色。
    position: absolute;
  }
  input[type=checkbox]:checked:before{
    content: "";
    display:block;
     20px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #D2A47E;
    background-color: #D2A47E;                 //可控制checked背景色
    box-sizing:border-box;
    position: absolute;
  }
  input[type=checkbox]:checked:after{
    content: "";
    display:block;
    /* .15rem;*/
    /*height: .3rem;*/
    /*border-radius:  .06rem;*/
     7px;                          // 此处是控制获取checked=true 后的颜色，请注意宽高比约1:2 。 原理是通过伪类去控制样式。
    height: 15px;
    /*border-radius:3px;*/
    border-left: .07rem solid #fff;
    border-top: .07rem solid #fff;
    box-sizing:border-box;
    position: absolute;
    transform: rotate(-135deg) translate(-70%, 25%);
  }