小程序全选

小程序的全选全不选单选全选选中全选

从网上找了一些好像都没能实现我想要的效果于是自己写了一个希望能帮助有需要的小伙伴。

废话不多说直接上干货

html

<checkbox-group bindchange="checkboxChange">
	<view class="tr" wx:for="{{listData}}" wx:key="index">
		<view class="td checkwidth">
			<checkbox value="{{item.code}}" checked="{{item.checked}}" />{{item.text}}
		</view>
	</view>
</checkbox-group>
<checkbox-group bindchange="selectall">
	<checkbox value="{{333}}" checked="{{checkeddable}}" />全选
</checkbox-group>

js代码

Page({
  data: {
    checkeddable: false,
    listData: [{
        code: "1",
        text: "测试1"
      },
      {
        code: "2",
        text: "测试2"
      },
      {
        code: "3",
        text: "测试3"
      }
    ],
    batchIds: '', //选中的ids
  },
  selectall: function (e) {
    var that = this;
    var arr = [];
    if(e.detail.value.length == 0){
      for (let i = 0; i < that.data.listData.length; i++) {

        that.data.listData[i].checked = false

        if (that.data.listData[i].checked == true) {
          // 全选获取选中的值
          arr = arr.concat(that.data.listData[i].code.split(','));
        }else{
          arr=[]
        }
      }
    }else{
      for (let i = 0; i < that.data.listData.length; i++) {

        that.data.listData[i].checked = true

        if (that.data.listData[i].checked == true) {
          // 全选获取选中的值
          arr = arr.concat(that.data.listData[i].code.split(','));
        }else{
          arr=[]
        }
      }
    }
    console.log(arr)
    that.setData({
      listData: that.data.listData,
      batchIds: arr
    })
  },
  checkboxChange: function (e) {
    console.log(e.detail.value)
    if (e.detail.value.length == this.data.listData.length) {
      this.setData({
        checkeddable: true,
        batchIds: e.detail.value
      })
    } else {
      this.setData({
        checkeddable: false,
        batchIds: e.detail.value //单个选中的值
      })
    }
  },
})