위 챗 애플 릿 이 체크 상자 의 모든 선택 반전 선택 값(인 스 턴 스 코드)을 가 져 옵 니 다.

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 //      
  })
 },
})

효과 그림:

총결산
위 에서 말 한 것 은 작은 편집자 가 여러분 에 게 소개 한 위 챗 애플 릿 입 니 다.콤 보 상자 에서 선택 한 값 을 가 져 옵 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.작은 편집자 가 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!