這篇文章給大家分享的是有關(guān)微信小程序如何實(shí)現(xiàn)多選框全選與反全選功能的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出五峰免費(fèi)做網(wǎng)站回饋大家。

實(shí)現(xiàn)的效果就是：

1.點(diǎn)擊全選選中所有商品，再點(diǎn)擊全選，取消勾選
2.在選中的同時(shí)獲取需要的商品id，獲取后是以字符串拼接的形式 拼成一個(gè)字符串
3.點(diǎn)擊刪除按鈕時(shí)刪除選中的商品

點(diǎn)擊全選

再次點(diǎn)擊全選框

wxml關(guān)鍵代碼

重要代碼

value="{{item.goods_id}}" -->checkbox被選中的值就是這個(gè)goods_id checked="{{item.checked}}" -->checked代表選中與否 ，ture選中，false未選中

//刪除購物車商品的按鈕
 刪除
//購物車商品部分
 
   
   
    
   
    
   
   {{item.goods_name}}
   24小時(shí)內(nèi)發(fā)貨
   ￥{{item.goods_price}}
   
   
   
   1
   
   
  
 

//全選框
  
 全選

全選反選 js 關(guān)鍵代碼

data: {
 select_all: false,
 car_goods:[
 ],
 checkbox_goodsid:'',
 },
 /**
 * 全選與反全選
 */
 selectall: function (e) {
 var that = this;
 var arr = '0';
 //that.data.car_goods.length是商品的個(gè)數(shù)
 for (let i = 0; i < that.data.car_goods.length; i++) {
 //循環(huán)給每個(gè)商品的checked賦值
  that.data.car_goods[i].checked = (!that.data.select_all)
  if (that.data.car_goods[i].checked == true) {
  // 全選獲取選中的值 以字符串拼接的形式 拼成一個(gè)字符串
   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;
 //這加個(gè)0 是我為了方便后臺(tái)處理。
 var checkbox_goodsid = 0+ ','+that.data.checkbox_goodsid
 this.setData({
  checkbox_goodsid: checkbox_goodsid//單個(gè)選中的值
 })
 console.log("checkbox_goodsid=" +that.data.checkbox_goodsid)
 },

  購物車刪除選中商品的 關(guān)鍵js代碼：

/**
 * 刪除選中的商品
 */
 delete_car:function(){
 var that = this
 var checkbox_goodsid = that.data.checkbox_goodsid
 console.log("點(diǎn)擊刪除選中的商品id" + checkbox_goodsid)
 if (checkbox_goodsid==""){
  wx.showToast({
  title: '您尚未選中商品',
  duration: 2000,//持續(xù)時(shí)間
  icon: 'none'
  })
 }
 else{
  wx.showModal({
  title: '提示',
  content: '您是否要?jiǎng)h除已選中商品',
  success: function (res) {
   if (res.confirm) {//這里是點(diǎn)擊了確定以后
   //刪除購物車的所有商品
   console.log("點(diǎn)擊確定的商品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 {//這里是點(diǎn)擊了取消以后
   console.log('用戶點(diǎn)擊取消')
   }
  }
  })
 }
 },

刪除商品的后臺(tái)關(guān)鍵代碼

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
如果看到這里還是看不懂：可以看一下下面這個(gè)文直接復(fù)制他的代碼去試一下，可以直接運(yùn)行，我覺得挺好的
微信小程序獲取復(fù)選框全選，反選選中的值
代碼運(yùn)行的效果圖如下：
但是我把他的方法用在我的頁面中出現(xiàn)了幾個(gè)問題
ps:1,2問題已解決：that.data.listData[i].code.split(',') 已經(jīng)是一個(gè)數(shù)組 不需要加concat方法。
arr = arr.concat(that.data.listData[i].code.split(','));
我使用 split會(huì)報(bào)錯(cuò)
2.去掉split 單選我獲得的數(shù)據(jù)傳到后臺(tái)是[“1”,“2”,“3”]類型的
全選是[1,2,3]類型的（這樣子傳到后臺(tái)的話，需要在后臺(tái)進(jìn)行分割獲取值。）
先通過]分割在用[分割再用，分割，因?yàn)檫€可能有"",所以在循環(huán)里還要用雙引號(hào)封
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
3.使用后來的自己的代碼獲取的數(shù)據(jù)類型是下面這種
前臺(tái)輸出
傳入后臺(tái)輸出
感謝各位的閱讀！關(guān)于“微信小程序如何實(shí)現(xiàn)多選框全選與反全選功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
            
            
                        

            當(dāng)前名稱：微信小程序如何實(shí)現(xiàn)多選框全選與反全選功能            

            文章網(wǎng)址：http://weahome.cn/article/gogjoh.html