小程序-之全选和反选

##在小程序中有时会遇到全选和反选 全选较为常见,而反选就不常见.

之前用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.