微信小程序如何獲取復選框全選反選選中的值

小編給大家分享一下微信小程序如何獲取復選框全選反選選中的值，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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 //單個選中的值
  })
 },
})

效果圖：

以上是“微信小程序如何獲取復選框全選反選選中的值”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！