小程序全選和全部取消

1.在wxml中先添加復(fù)選框和點擊事件

<checkbox class="q" bindtap="checkq" checked="{{isAll}}">全選</checkbox>
<text bindtap-="tz">跳轉(zhuǎn)下一頁</text>
<text>總數(shù)：{{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中添加數(shù)據(jù)

>: function () {
	 var list=[];
     var li={};
	 for(var i=0;i< 10;i++){
      li={
        id:i+1,
        img: "../../img/sw.jpg",
        title: "標(biāo)題"+(i+1),
        content: "內(nèi)容"+(i+1),
        num: (i+1),
        time: "9:00",
        isCheck:false
      }
      list.push(li[i])
      }
      this.setData({
      list:list
    })
}

3.實現(xiàn)全選的點擊事件，首先要定義一個全局變量isAll=false，讓復(fù)選框默認為不勾選狀態(tài)

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.實現(xiàn)點擊每一項前面的復(fù)選框，全部點擊的話全選字樣的復(fù)選框也勾選，如有一項沒有勾選則全選字樣的復(fù)選框不勾選

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
    })
  },