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{
  width: 25%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/*------新-----*/
  input[type=checkbox] {
    width: 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;
    width: 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;
    width: 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;
    width: 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;
    /*width: .15rem;*/
    /*height: .3rem;*/
    /*border-radius:  .06rem;*/
    width: 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%);
  }