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


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 相关文章推荐
javaScript对象和属性的创建方法
Jan 15 Javascript
javaScript实现浮点数转十六进制字符
Oct 29 Javascript
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
js控制分页打印、打印分页示例
Feb 08 Javascript
js实现点击链接后延迟3秒再跳转的方法
Jun 05 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
JS实现黑客帝国文字下落效果
Sep 01 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
小程序实现页面顶部选项卡效果
Nov 06 Javascript
es6函数之箭头函数用法实例详解
Apr 25 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
react中hook介绍以及使用教程
Dec 11 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
windows服务器中检测PHP SSL是否开启以及开启SSL的方法
2014/04/25 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php中adodbzip类实例
2014/12/08 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
PHP设计模式(一)工厂模式Factory实例详解【创建型】
2020/05/02 PHP
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
javascript中的事件代理初探
2014/03/08 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
bootstrap响应式表格实例详解
2017/05/15 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
Vue.js 中 axios 跨域访问错误问题及解决方法
2018/11/21 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
[00:27]DOTA2荣耀之路2:Patience from zhou!
2018/05/24 DOTA
[25:45]2018DOTA2亚洲邀请赛4.5SOLO赛 Sylar vs Paparazi
2018/04/06 DOTA
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
python通过urllib2获取带有中文参数url内容的方法
2015/03/13 Python
Python3.2中的字符串函数学习总结
2015/04/23 Python
Python使用multiprocessing创建进程的方法
2015/06/04 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Python依赖包整体迁移方法详解
2019/08/15 Python
python实现邮件循环自动发件功能
2020/09/11 Python
使用Python快速打开一个百万行级别的超大Excel文件的方法
2021/03/02 Python
澳洲的服装老品牌:SABA
2018/02/06 全球购物
美国乒乓球设备、配件和服装品牌:Killerspin
2020/06/07 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
会计找工作求职信范文
2013/12/09 职场文书
质量承诺书格式范文
2015/04/28 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技
CDPR谈《巫师》新作用虚幻5原因 称不会为Epic独占
2022/04/06 其他游戏