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

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

废话不多说直接上干货

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 //单个选中的值
      })
    }
  },
})

最后

以上就是内向月亮为你收集整理的小程序全选废话不多说直接上干货js代码的全部内容，希望文章能够帮你解决小程序全选废话不多说直接上干货js代码所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。