微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

2023-08-04 10:50:03 57

实现的效果就是：

1.点击全选选中所有商品，再点击全选，取消勾选
2.在选中的同时获取需要的商品id，获取后是以字符串拼接的形式拼成一个字符串
3.点击删除按钮时删除选中的商品

点击全选

再次点击全选框

wxml关键代码

重要代码

value="{{item.goods_id}}"-->checkbox被选中的值就是这个goods_idchecked="{{item.checked}}"-->checked代表选中与否，ture选中，false未选中

//删除购物车商品的按钮
删除
//购物车商品部分







{{item.goods_name}}
24小时内发货
￥{{item.goods_price}}



1





//全选框

全选

全选反选js关键代码

data:{
select_all:false,
car_goods:[
],
checkbox_goodsid:'',
},
/**
*全选与反全选
*/
selectall:function(e){
varthat=this;
vararr='0';
//that.data.car_goods.length是商品的个数
for(leti=0;i
删除商品的后台关键代码
action.java代码
/*
*删掉购物车选中的商品
**/
@RequestMapping("/delete_choosegoods")
publicIntegerdelete_choosegoods(Stringcheckbox_goodsid){
System.out.println("checkbox_goodsid::"+checkbox_goodsid);
Stringopenid=(String)redisTemplate.boundValueOps("openid").get();
intn=0;

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

for(inti=1;i
如果看到这里还是看不懂：可以看一下下面这个文直接复制他的代码去试一下，可以直接运行，我觉得挺好的
微信小程序获取复选框全选，反选选中的值
代码运行的效果图如下：

但是我把他的方法用在我的页面中出现了几个问题
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(inti=1;i
3.使用后来的自己的代码获取的数据类型是下面这种
前台输出

传入后台输出


总结
以上所述是小编给大家介绍的微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能

热门推荐

随机推荐