開始寫這個功能，不得不吐槽原始的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%);}

?

轉載于:https://www.cnblogs.com/panax/p/10985188.html

總結

以上是生活随笔為你收集整理的vue中checkbox 样式自定义重写；循环遍历checkbox,拿到不同的v-model绑定值；及获取当前checked 状态，全选和全不选等功能。...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。