위 챗 애플 릿 은 다 중 선택 상자 의 전체 선택 과 반전 선택 및 카 트 에서 선택 한 상품 을 삭제 하 는 기능 을 실현 합 니 다.

실현 의 효 과 는:
1.전체 선택 을 클릭 하여 모든 상품 을 선택 하고 전체 선택 을 클릭 하여 선택 을 취소 합 니 다.
2.선택 과 동시에 필요 한 상품 id 를 가 져 옵 니 다.가 져 온 후 문자열 로 문자열 을 맞 춥 니 다.
3.삭제 버튼 을 눌 렀 을 때 선택 한 상품 삭제
클릭 하여 전체 선택

전체 선택 상 자 를 다시 클릭 하 십시오.

wxml 키 코드
중요 코드
4value="{{item.goods_id}}" -->checkbox선 택 된 값 은 바로 이것 입 니 다goods_id checked="{{item.checked}}" -->checked선택 여 부 를 대표 합 니 다.ture 선택,false 가 선택 되 지 않 았 습 니 다.

//          
 <view bindtap="delete_car" class="btn_delete">  </view>
//       
 <checkbox-group bindchange="checkboxChange">
  <view wx:for="{{car_goods}}" class="car_list" wx:key="key" > 
   <label class="checkbox">
   <checkbox value="{{item.goods_id}}" checked="{{item.checked}}" class="checkbox"/> 
   </label>
   <image src="/static/images/goods/{{item.goods_picture}}" class="goods_img" bindtap="gotodetail"></image> 
   <view class="box1" bindtap="gotodetail">
   <view class="goods_name" >{{item.goods_name}}</view>
   <view class="fahuo">24     </view>
   <view class="goods_price"style="color: rgb(241, 32, 32)">￥{{item.goods_price}}</view>
   </view>
   <view class="box2" >
   <image src="/static/images/commom/jian.png" class="jian_img" bindtap="add_goods"></image>
   <text class="goods_num">1</text>
   <image src="/static/images/commom/jia.png" class="jia_img" bindtap="delete_goods"></image>
   </view>
  </view>
 </checkbox-group>

//   
 <checkbox class="checkbox" bindtap="selectall"/> 
 <view class="quanxuan">  </view>

전체 선택 반전 js 키 코드

data: {
 select_all: false,
 car_goods:[
 ],
 checkbox_goodsid:'',
 },
 /**
 *       
 */
 selectall: function (e) {
 var that = this;
 var arr = '0';
 //that.data.car_goods.length      
 for (let i = 0; i < that.data.car_goods.length; i++) {
 //        checked  
  that.data.car_goods[i].checked = (!that.data.select_all)
  if (that.data.car_goods[i].checked == true) {
  //                           
   arr = arr +","+ that.data.car_goods[i].goods_id;
  }
 }
 console.log("arr="+arr)
 //  
 that.setData({
  car_goods: that.data.car_goods,
  select_all: (!that.data.select_all),
  checkbox_goodsid: arr
 })
 },
 
 //   
 checkboxChange: function (e) {
 var that =this;
 //   0           。
 var checkbox_goodsid = 0+ ','+that.data.checkbox_goodsid
 this.setData({
  checkbox_goodsid: checkbox_goodsid//      
 })
 console.log("checkbox_goodsid=" +that.data.checkbox_goodsid)
 },

  카 트 에서 선택 한 상품 의 핵심 js 코드 삭제:
 

/**
 *        
 */
 delete_car:function(){
 var that = this
 var checkbox_goodsid = that.data.checkbox_goodsid
 console.log("         id" + checkbox_goodsid)
 if (checkbox_goodsid==""){
  wx.showToast({
  title: '       ',
  duration: 2000,//    
  icon: 'none'
  })
 }
 else{
  wx.showModal({
  title: '  ',
  content: '           ',
  success: function (res) {
   if (res.confirm) {//          
   //          
   console.log("       id" + checkbox_goodsid)
   wx.request({
    url: 'http://localhost:8080/delete_choosegoods',
    data:{
    checkbox_goodsid: checkbox_goodsid
    },
    success: function (e) {
    //    
    const pages = getCurrentPages()
    const perpage = pages[pages.length - 1]
    perpage.onLoad() 
    }
   })
   } else {//          
   console.log('      ')
   }
  }
  })
 }
 },

상품 의 배경 키 코드 삭제
action.java 코드

/*
 *           
* */
 @RequestMapping("/delete_choosegoods")
 public Integer delete_choosegoods(String checkbox_goodsid){
  System.out.println("checkbox_goodsid::"+checkbox_goodsid);
  String openid = (String) redisTemplate.boundValueOps("openid").get();
  int n = 0;

  String[] arrays2 =checkbox_goodsid.split(",");
  System.out.println(",    0"+arrays2[0]);

   for(int i=1;i<arrays2.length;i++){
   int goods_id = Integer.parseInt(arrays2[i].toString());
    System.out.println("goods_id"+goods_id);
   n = goodsService.delete_cargoods(openid,goods_id);
  }
  return n;
 }

만약 에 여 기 를 보고 도 이해 가 안 된다 면 아래 의 이 글 을 보고 그의 코드 를 직접 복사 해서 시험 해 볼 수 있 습 니 다.직접 실행 할 수 있 습 니 다.저 는 좋 은 것 같 습 니 다.
위 챗 애플 릿 은 체크 상자 의 전체 선택 을 가 져 오고 선택 한 값 을 되 돌 립 니 다.
코드 실행 효과 그림 은 다음 과 같 습 니 다.

그런데 제 가 방법 을 제 페이지 에 써 서 몇 가지 문제 가 생 겼 어 요.
ps:1,2 문제 가 해결 되 었 습 니 다:that.data.listdata[i].code.split(',')는 이미 하나의 배열 입 니 다.concat 방법 을 추가 할 필요 가 없습니다.

arr = arr.concat(that.data.listData[i].code.split(','));

나 는 split 를 사용 하면 잘못 보고 할 것 이다.
2.split 체크 를 제거 하고 내 가 얻 은 데 이 터 를 백 엔 드 로 전송 하 는 것 은["1","2","3"]형식 입 니 다.
전체 선택 은[1,2,3]형식 입 니 다.
먼저 통과]분할 재 용[분할 재 용,분할,있 을 수 있 기 때문에 순환 에서 더 블 따옴표 로 봉 해 야 합 니 다.

String[] arrays = checkbox_goodsid.split("]");
System.out.println("]    arrays[0]"+arrays[0]);

String[] arrays1= arrays[0].split(" \\[");
System.out.println("[    0："+arrays1[0]);
 
String[] arrays2 =arrays1[arrays1.length-1].split(",");
System.out.println(",    0"+arrays2[0]);
for(int i=1;i<arrays2.length;i++){
//    "      ，    \"        
       。
 }

3.나중에 자신의 코드 를 사용 하여 얻 은 데이터 형식 은 다음 과 같 습 니 다.
프론트 출력

백 엔 드 출력
총결산
위 와 같이 소 편 이 소개 한 위 챗 애플 릿 은 다 중 선택 상자 의 전체 선택 과 반전 선택 및 카 트 에서 선택 한 상품 을 삭제 하 는 기능 을 실현 합 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 신속하게 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
만약 당신 이 본문 이 당신 에 게 도움 이 된다 고 생각한다 면,전 재 를 환영 합 니 다.번 거 로 우 시 겠 지만 출처 를 밝 혀 주 십시오.감사합니다!