<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">
<div class="name">{{item3}}</div>
// checkbox的v-model绑定值一定要是数组
{{checkedValue}}
</label>
<button @click="chooseQu">全选</button>
<button @click="chooseNo">全不选</button>
</section>
data(){
return{
checkedValue: [],
type:['a','b','c','d'] // 测试数据，可在mounted钩子函数中将后台数据赋值
}
},
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,
}
}
