小程序checkbox全選

原文鏈接：https://www.cnblogs.com/zxf100/p/10383187.html

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

.tr{
background-color: #dadada;
white-space: nowrap;
width:100%;
display: flex;
text-align: center;
justify-content: center;
}

.th{
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: '',
	},
	//全選與反全選
  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  //單個選中的值
    })
  }
})