⼩程序实现多选框全选与反全选及购物车中删除选中
的商品功能
实现的效果就是：
1.点击全选选中所有商品，再点击全选，取消勾选
2.在选中的同时获取需要的商品id，获取后是以字符串拼接的形式拼成⼀个字符串
3.点击删除按钮时删除选中的商品
点击全选
再次点击全选框
wxml关键代码
重要代码
value="{{ds_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="{{ds_id}}" checked="{{item.checked}}" class="checkbox"/>
</label>
<image src="/static/images/goods/{{ds_picture}}" class="goods_img" bindtap="gotodetail"></image>    <view class="box1" bindtap="gotodetail">
<view class="goods_name" >{{ds_name}}</view>
<view class="fahuo">24⼩时内发货</view>
<view class="goods_price">￥{{ds_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 (firm) {//这⾥是点击了确定以后
//删除购物车的所有商品
console.log("点击确定的商品id" + checkbox_goodsid)
url: 'localhost:8080/delete_choosegoods',
data:{
checkbox_goodsid: checkbox_goodsid
},
success: function (e) {
//页⾯刷新
const pages = getCurrentPages()
const perpage = pages[pages.length - 1]
}
})
} 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 = at(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.使⽤后来的⾃⼰的代码获取的数据类型是下⾯这种
前台输出
传⼊后台输出
总结
以上所述是⼩编给⼤家介绍的⼩程序实现多选框全选与反全选及购物车中删除选中的商品功能，
希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！
如果你觉得本⽂对你有帮助，欢迎转载，烦请注明出处，谢谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。