vue中input的全选与取消全选
html:
<p>全选:<input type="checkbox" @click="selectAll()" v-model="checked" /></p>
<div v-for="item in checks" :key="item.id">
<input type="checkbox" :value="item.id" @click="handleClick(item.id)" v-model="item.checked" />
<span>{{item.name}}---{{item.title}}</span>
</div>
js:
checks:[
{id:250,name:"张浩浩",title:"笔记本"},
{id:251,name:"浩浩张",title:"游戏机"},
{id:252,name:"浩张浩",title:"显示器"},
],
checkBox:[],
checked:"",
//全选按钮
selectAll(){
this.checked = !this.checked;
if(this.checked){
this.checks.forEach( (item)=> {
this.checkBox.push(item.id)
item.checked=this.checked;
})
}else{
this.checkBox=[];
this.checks.forEach( (item)=> {
item.checked=this.checked;
})
}
console.log("checkBox===",this.checkBox)
},