微信小程序?qū)崿F(xiàn)多選框全選與反全選及購(gòu)物車(chē)中刪除選中的商品功能
實(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未選中
//刪除購(gòu)物車(chē)商品的按鈕
<view bindtap="delete_car" class="btn_delete">刪除</view>
//購(gòu)物車(chē)商品部分
<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小時(shí)內(nèi)發(fā)貨</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 關(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)
},
購(gòu)物車(chē)刪除選中商品的 關(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)擊了確定以后
//刪除購(gòu)物車(chē)的所有商品
console.log("點(diǎn)擊確定的商品id" + checkbox_goodsid)
wx.request({
url: 'http://localhost:8080/delete_choosegoods',
data:{
checkbox_goodsid: checkbox_goodsid
},
success: function (e) {
//頁(yè)面刷新
const pages = getCurrentPages()
const perpage = pages[pages.length - 1]
perpage.onLoad()
}
})
} else {//這里是點(diǎn)擊了取消以后
console.log('用戶點(diǎn)擊取消')
}
}
})
}
},
刪除商品的后臺(tái)關(guān)鍵代碼
action.java代碼
/*
* 刪掉購(gòu)物車(chē)選中的商品
* */
@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;
}
如果看到這里還是看不懂:可以看一下下面這個(gè)文直接復(fù)制他的代碼去試一下,可以直接運(yùn)行,我覺(jué)得挺好的
代碼運(yùn)行的效果圖如下:

但是我把他的方法用在我的頁(yè)面中出現(xiàn)了幾個(gè)問(wèn)題
ps:1,2問(wèn)題已解決: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”]類(lèi)型的
全選是[1,2,3]類(lèi)型的(這樣子傳到后臺(tái)的話,需要在后臺(tái)進(jìn)行分割獲取值。)
先通過(guò)]分割在用[分割再用,分割,因?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<arrays2.length;i++){
//這里通過(guò)"分割獲取信息,但需要用\"對(duì)雙引號(hào)進(jìn)行轉(zhuǎn)義
獲取后轉(zhuǎn)成整型。
}
3.使用后來(lái)的自己的代碼獲取的數(shù)據(jù)類(lèi)型是下面這種
前臺(tái)輸出

傳入后臺(tái)輸出
總結(jié)
以上所述是小編給大家介紹的微信小程序?qū)崿F(xiàn)多選框全選與反全選及購(gòu)物車(chē)中刪除選中的商品功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
- 微信小程序 購(gòu)物車(chē)簡(jiǎn)單實(shí)例
- 微信小程序?qū)崙?zhàn)篇之購(gòu)物車(chē)的實(shí)現(xiàn)代碼示例
- 微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)功能
- 微信小程序?qū)崿F(xiàn)購(gòu)物車(chē)代碼實(shí)例詳解
- 微信小程序之購(gòu)物車(chē)功能
- 微信小程序購(gòu)物車(chē)、父子組件傳值及calc的注意事項(xiàng)總結(jié)
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車(chē)功能
- 微信小程序利用swiper+css實(shí)現(xiàn)購(gòu)物車(chē)商品刪除功能
- 微信小程序?qū)崿F(xiàn)加入購(gòu)物車(chē)滑動(dòng)軌跡
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)單購(gòu)物車(chē)小功能
相關(guān)文章
基于JavaScript實(shí)現(xiàn)全屏透明遮罩div層鎖屏效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)全屏透明遮罩div層鎖屏效果的相關(guān)資料,需要的朋友可以參考下2016-01-01
基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記
這篇文章主要介紹了基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-03
bootstrap精簡(jiǎn)教程_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要介紹了bootstrap精簡(jiǎn)教程,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
JavaScript定義簡(jiǎn)單的頁(yè)面復(fù)選框?qū)崿F(xiàn)全選操作
本文主要介紹了JavaScript定義簡(jiǎn)單的頁(yè)面復(fù)選框?qū)崿F(xiàn)全選操作,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法
這篇文章主要介紹了后臺(tái)獲取ZTREE選中節(jié)點(diǎn)的方法,實(shí)例分析了ZTREE中g(shù)etZTreeObj方法與getCheckedNodes方法的使用技巧,需要的朋友可以參考下2015-02-02
使用TextRange獲取輸入框中光標(biāo)的位置的代碼
使用TextRange獲取輸入框中光標(biāo)的位置的代碼...2007-03-03
微信小程序?qū)崿F(xiàn)長(zhǎng)按 識(shí)別圖片二維碼(兩種方案)
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)長(zhǎng)按 識(shí)別圖片二維碼(兩種方案),第一種方案只需要在image里面加一個(gè)屬性就可以了,本文結(jié)合實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
淺談js停止事件冒泡 阻止瀏覽器的默認(rèn)行為(阻止超連接 #)
下面小編就為大家?guī)?lái)一篇淺談js停止事件冒泡 阻止瀏覽器的默認(rèn)行為(阻止超連接 #)。2017-02-02

