小程序全选和全部取消

1.在wxml中先添加复选框和点击事件

<checkbox class="q" bindtap="checkq" checked="{{isAll}}">全选</checkbox>
<text bindtap-="tz">跳转下一页</text>
<text>总数：{{sum}}</text>
</view>
<view class="box1" wx:for="{{list}}" bindtap="chlik" data-number="{{index}}">
<checkbox checked="{{item.isCheck}}"></checkbox>
  <image src="{{item.img}}"></image>
  <view wx:if="{{item.num <= 0}}"></view>
  <view class="tb" wx:elif="{{item.num > 99}}">99+</view>
  <view class="tb" wx:else>{{item.num}}</view>
  <view class="box2">
    <view class="box3">
      <view class="mz">{{item.title}}</view>
      <view class="box4">{{item.time}}</view>
    </view>
    <view class="xx">{{item.content}}</view>
  </view>
</view>

2.在js中添加数据

>: function () {
	 var list=[];
     var li={};
	 for(var i=0;i< 10;i++){
      li={
        id:i+1,
        img: "../../img/sw.jpg",
        title: "标题"+(i+1),
        content: "内容"+(i+1),
        num: (i+1),
        time: "9:00",
        isCheck:false
      }
      list.push(li[i])
      }
      this.setData({
      list:list
    })
}

3.实现全选的点击事件，首先要定义一个全局变量isAll=false，让复选框默认为不勾选状态

var isAll=false
Page({
checkq:function(){
    var list=this.data.list;
    console.log(list);
    isAll=!isAll;
    if(isAll){
      for(var i=0;i<list.length;i++){
        var item=list[i];
        item.isCheck=true
        list.splice(i,1,item)
      }
    }else{
      for(var i=0;i<list.length;i++){
        var item=list[i];
        item.isCheck=false
        list.splice(i,1,item)
      }
    }
    this.setData({
      list:list
    })
  },
  }

4.实现点击每一项前面的复选框，全部点击的话全选字样的复选框也勾选，如有一项没有勾选则全选字样的复选框不勾选

chlik:function(e){
    var index=e.currentTarget.dataset.number;
    var list=this.data.list;
    var item=list[index];
    item.isCheck=!item.isCheck;
    list.splice(index,1,item)
    this.setData({
      list:list
    })
    var qb=0
    var sum=0
    for(var i=0;i<list.length;i++){
      if(list[i].isCheck){
        qb++
        sum+=list[i].num
      }
    }
    if(qb===list.length){
      isAll=true
    }else{
      isAll=false
    }
    this.setData({
      isAll:isAll,
      sum:sum
    })
  },