vue中实现全选多选
一、给全选框绑定点击事件HTML:<div class="fixedLef" @click="chooseAllCart"><input type="checkbox" :checked="chooseAll" name id /><p>全选</p></div>JS:chooseAllC...
·
一、给全选框绑定点击事件
HTML:
<div class="fixedLef" @click="chooseAllCart">
<input type="checkbox" :checked="chooseAll" name id />
<p>全选</p>
</div>
JS:
chooseAllCart() {
//点击以后,给全选按钮修改状态,布尔值取反
this.chooseAll = !this.chooseAll;
//给列表中的每一项同步状态
for (var i = 0; i < this.shopcartList.length; i++) {
this.shopcartList[i].choose = this.chooseAll;
}
},
二、单独自定义选择的时候
HTML:
<ul class="spUl">
<li v-for="(item,index) in shopcartList" :key="index" :index="index">
<div class="spDesc">
<div class="spName">{{item.goodsEntity.name}}</div>
<input
type="checkbox"
//绑定当前元素的状态
:checked="item.choose"
name
id
class="oneCheck"
//给点击事件传入被点击元素在当前数组列表中的索引
@click="chooseOne(index)"
/>
</div>
</li>
</ul>
JS:
chooseOne(index) {
//给被点击的元素修改状态,布尔值取反即可
this.shopcartList[index].choose = !this.shopcartList[index].choose;
循环数组,只要有一项没被选中,即全选按钮就不会被修改为选中状态
for (var i = 0; i < this.shopcartList.length; i++) {
if (this.shopcartList[i].choose == false) {
this.chooseAll = false;
break;
}
}
如果,一直循环到i等于数组长度还没出发break,即所有选项状态均为true,此时此刻就应该把全选按钮
修改为全选状态
if (i == this.shopcartList.length) {
this.chooseAll = true;
}
},
更多推荐
已为社区贡献11条内容
所有评论(0)