一、要实现的效果
1.当点击“全选”时,能全选所有;
2.点取消掉列表的某个input框时,“全选”框不被选择;
二、html结构
前提: v-for循环遍历list,列表中的每个item都有checked属性,用v-model绑定item.checked;input标签有change方法,当值改变时生效
(1)单选:
<div v-for="(i,index) in list">
<input type="checkbox"
v-model="i.checked"
@change="checkboxSelect" />
</div>
(2)全选:
<div class="checkbox text">
<input type="checkbox"
v-model="checkAll"
@change="checkAllChange">全选
</div>
三、method方法
(1)单选:
checkboxSelect() {
// 选中的个数
var num = this.list.filter(item => item.checked).length;
// console.log(num);
if (num == this.list.length) {
//如果选中的数量为数组的长度,则全选框被选择
this.checkAll = true
} else {
this.checkAll = false
}
},
可简化为:
checkboxSelect() {
// every()检测数组中的元素是否符合条件,如果元素都满足条件,返回true;
//只要有一个不满足,返回false
this.checkAll = this.list.every(item => item.checked)
}
(2)全选
checkAllChange() {
this.list.forEach(item => {
// 把每个item的checked属性 设为 与全选框一致的值
item.checked = this.checkAll
// console.log('checkAllChange', item.checked)
})
}