##在小程序中有时会遇到全选和反选 全选较为常见,而反选就不常见.
之前用checkbox-group,包围 住checkbox,导致反选和全选 总是有点问题,于是便舍弃了
checkbox-group.
<view class="list-control">
<view class="fl" @tap="selAll">全选</view>
<view class="fl" @tap="selReverse">反选</view>
</view>
<view class="weui-cells color-333">
<block wx:for="{{list}}" wx:key="id">
<view class="weui-cell" hover-class="weui-cell_active" @tap="toggle({{index}})">
<view class="weui-cell__hd" style="width:2.4em;">
<checkbox checked="{{item.checked}}"/>
</view>
<view class="weui-cell__bd">
{{item.name}}
</view>
</view>
</block>
</view>
data = {
count:''//总体数目
selectCount : ''//选择数目
}
//全择全部
selAll () {
this.list.forEach(one => {
one.checked = !0
})
this.selectCount = this.count
},
//反选
selReverse () {
this.list.forEach(one => {
one.checked = !one.checked
})
this.selectCount = this.count - this.selectCount
},
注意列表中的check是我们自己新加的字段,在接口中取到该数组时,记得先处理一下
将其设置为false.