小程式複選框全選和全部取消

小程式全選和全部取消

1.在wxml中先添加複選框和點選事件

<view class="all">
  <checkbox class="q" bindtap="checkq" checked="{{isAll}}">全選</checkbox>
</view>
<view class="Box">
  <view class="box1" wx:for="{{list}}" bindtap="chlik" data-number="{{index}}">
    <checkbox checked="{{item.isCheck}}">{{item.name}}</checkbox>
  </view>
</view>
           

2.在js中添加資料

// pages/xuan/xuan.js
var isAll=false
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    list: [{
      id: "0001",
      name: "張三"
    },
    {
      id: "0002",
      name: "李四"
    },
    {
      id: "0003",
      name: "王五"
    }
  ]
  },
  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
    })
  },
  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
    })
  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})
           

3.wxss

.Box{
  margin-top: 50rpx;
  background-color: #d3d3d3;
}
.all{
  height: 65rpx;
  display: block;
  background-color: azure;
  border-bottom: 1rpx solid #d3d3d3;
}