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


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对JSON进行模式匹配 (Part 2 - 实现)
Jul 17 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
疯狂Jquery第一天(Jquery学习笔记)
May 11 Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
Aug 22 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
Aug 11 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
Vue slot用法(小结)
Oct 22 Javascript
JS动态图片的实现方法完整示例
Jan 13 Javascript
微信小程序实现简单文字跑马灯
May 26 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
PHP实现链式操作的三种方法详解
2017/11/16 PHP
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
微信小程序 实现tabs选项卡效果实例代码
2016/10/31 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
JavaScript高级函数应用之分时函数实例分析
2018/08/03 Javascript
el-select数据过多懒加载的解决(loadmore)
2019/05/29 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
微信小程序国际化探索实现(附源码地址)
2020/05/20 Javascript
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python实现socket端口重定向示例
2014/02/10 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
Django框架序列化与反序列化操作详解
2019/11/01 Python
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
汽车专业大学生职业生涯规划范文
2014/01/07 职场文书
合作协议书模板
2014/10/10 职场文书
公司员工培训管理制度
2015/08/04 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis