小程序-之全選和反選

##在小程序中有時會遇到全選和反選 全選較為常見,而反選就不常見.

 

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