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


Posted in Javascript onDecember 17, 2019

实现的效果就是:

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

点击全选

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

再次点击全选框

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

wxml关键代码

重要代码

value="{{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.使用后来的自己的代码获取的数据类型是下面这种

前台输出

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

传入后台输出

总结

以上所述是小编给大家介绍的微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery 自定义容器下雨效果可将下雨图标改为其他
Apr 23 Javascript
Javascript刷新窗口方法小结
Oct 21 Javascript
JS实现状态栏跑马灯文字效果代码
Oct 24 Javascript
js操作DOM--添加、删除节点的简单实例
Jul 08 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
JS实现类似51job上的地区选择效果示例
Nov 17 Javascript
jquery中绑定事件的异同
Feb 28 Javascript
微信小程序实现选项卡功能
Jun 19 Javascript
vue 权限认证token的实现方法
Jul 17 Javascript
简单了解前端渐进式框架VUE
Jul 20 Javascript
three.js 如何制作魔方
Jul 31 Javascript
TypeScript高级用法的知识点汇总
Dec 17 #Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
Dec 17 #Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 #Javascript
JS实现打字游戏
Dec 17 #Javascript
js实现打字小游戏
Dec 17 #Javascript
微信小程序缓存支持二次开发封装实现解析
Dec 16 #Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
Dec 16 #Javascript
You might like
收音机发烧友应当熟知的100条知识
2021/03/02 无线电
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
PHPstorm快捷键(分享)
2017/07/17 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
jquery实现右键菜单插件
2015/03/29 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
基于jQuery实现仿微博发布框字数提示
2016/07/27 Javascript
AngularJS自定义服务与fliter的混合使用
2016/11/24 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
Vue Cli3 创建项目的方法步骤
2018/10/15 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
Openlayers实现扩散的动态点(水纹效果)
2020/08/17 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
详解Django中的过滤器
2015/07/16 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Django REST framework 如何实现内置访问频率控制
2019/07/23 Python
在 Jupyter 中重新导入特定的 Python 文件(场景分析)
2019/10/27 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
社会学专业求职信
2014/02/24 职场文书
毕业生如何写自我鉴定
2014/03/15 职场文书
幼儿园小班家长寄语
2014/04/02 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
公务员廉洁从政心得体会
2016/01/19 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
Python实现文本文件拆分写入到多个文本文件的方法
2021/04/18 Python
MySql新手入门的基本操作汇总
2021/05/13 MySQL
Qt数据库应用之实现图片转pdf
2022/06/01 Java/Android