讲一下微信小程序checkbox多选框如何实现全选反选与反选功能。
wxml文件
<view class="tr"> <view class="th"> <checkbox bindtap="selectall" />全选 </view> <view class="th">id</view> <view class="th">名称</view> </view> <checkbox-group bindchange="checkboxChange"> <view class="tr" wx:for="{{listData}}" wx:key=""> <view class="td"> <checkbox value="{{item.code}}" checked="{{item.checked}}" /> </view> <view class="td" value="{{item.text}}">{{item.code}}</view> <view class="td" value="{{item.text}}">{{item.text}}</view> </view> </checkbox-group>
wxss文件
.table{ background-color: #fff; border:1px solid #dadada; width:1200rpx; margin-left:0rpx; } .tr{ background-color: #dadada; white-space: nowrap; width:100%; display: flex; text-align: center; justify-content: center; } .th{ background-color: #fff999; text-align: center; justify-content: center; width: 100%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; } .td{ background-color: #fff; text-align: center; justify-content: center; width: 100%; border-bottom: 1px solid #dadada; border-right: 1px solid #dadada; }
js文件
Page({
  data: {
    select_all: false,
    listData: [
      { code: "1", text: "测试1" },
      { code: "2", text: "测试2"},
      { code: "3", text: "测试3"}
    ],
    batchIds: '',    //选中的ids
  },
//全选与反全选
selectall: function (e) {
  console.log(e)
    var that = this;
    var arr = [];   //存放选中id的数组
    for (let i = 0; i < that.data.listData.length; i++) {
      that.data.listData[i].checked = (!that.data.select_all)
      if (that.data.listData[i].checked == true){
        // 全选获取选中的值
        arr = arr.concat(that.data.listData[i].code.split(','));
      }
    }
  console.log(arr)
    that.setData({
      listData: that.data.listData,
      select_all: (!that.data.select_all),
      batchIds:arr
    })
  },
  // 单选
  checkboxChange: function (e) {
    console.log(e.detail.value)
    this.setData({
      batchIds: e.detail.value  //单个选中的值
    })
  },
})如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!