小程序功能实现之全选\单选\反选

html部分

<view>
  <van-checkbox value="{{ checkedReverse }}" bind:change="onChangeOther">反选</van-checkbox>
  <block wx:for="{{list}}" wx:key="index">
    <van-checkbox name="a" value="{{ item.checked }}" bind:change="onChangeItem" data-index="{{index}}">{{item.name}}
    </van-checkbox>
  </block>
  <van-checkbox value="{{ checkedAll }}" bind:change="onChangeAll">全选</van-checkbox>
</view>

js部分

data：

    list: [{
      name: 'a',
      checked: false
    }, {
      name: 'b',
      checked: false
    }, {
      name: 'c',
      checked: false
    }, {
      name: 'd',
      checked: false
    }, {
      name: 'e',
      checked: false
    }],
    checkedReverse:false,
    checkedAll: false
 

单选事件

 onChangeItem(event) {
    let {index} = event.currentTarget.dataset
    this.data.list[index].checked = !this.data.list[index].checked
    var count = 0;
    for(var i = 0;i< this.data.list.length; i++){
      if(this.data.list[i].checked) count++;
    }
    this.data.checkedAll = (count === this.data.list.length)
    this.setData({list:this.data.list,checkedAll:this.data.checkedAll})
  },

全选事件

  onChangeAll(e){
      this.data.checkedAll = !this.data.checkedAll
      this.data.list.map(item=>item.checked=this.data.checkedAll)
      this.setData({list:this.data.list,checkedAll:this.data.checkedAll})
  },

反选事件

  onChangeOther(e){
    console.log(e)
    this.data.checkedReverse = !this.data.checkedReverse
    this.data.list.map(item => item.checked = !item.checked)
    var count = 0;
    for (var i = 0; i < this.data.list.length; i++) {
      if (this.data.list[i].checked) count++;
    }
    this.data.checkedAll = (count === this.data.list.length)
    this.setData({checkedReverse:this.data.checkedReverse,list:this.data.list,checkedAll: this.data.checkedAll})
  },

完成了，O(∩_∩)O哈哈~，来展示下成果吧，(#^.^#)

实际需求可扩展。。。。。