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


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 相关文章推荐
js multiple全选与取消全选实现代码
Dec 04 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
实例讲解JQuery中this和$(this)区别
Dec 08 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
Sep 26 Javascript
分步解析JavaScript实现tab选项卡自动切换功能
Jan 25 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
js改变html的原有内容实现方法
Oct 05 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
js实现鼠标移动到图片产生遮罩效果
Oct 21 Javascript
js实现中文实时时钟
Jan 15 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
PHP.MVC的模板标签系统(三)
2006/09/05 PHP
在PHP的图形函数中显示汉字
2006/10/09 PHP
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
js 巧妙去除数组中的重复项
2010/01/25 Javascript
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
js canvas实现放大镜查看图片功能
2017/06/08 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
JavaScript实现三级联动菜单效果
2017/08/16 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[01:00:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第三场 1月10日
2021/03/11 DOTA
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
对python多线程与global变量详解
2018/11/09 Python
Python解决线性代数问题之矩阵的初等变换方法
2018/12/12 Python
python ---lambda匿名函数介绍
2019/03/13 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
介绍一下gcc特性
2012/01/20 面试题
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
英语系毕业生自荐信
2013/10/31 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
夜不归宿检讨书
2014/02/25 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
毕业自我鉴定书
2014/03/24 职场文书
技术合作协议书范本
2014/04/18 职场文书
文明生主要事迹
2014/05/25 职场文书
pytorch加载预训练模型与自己模型不匹配的解决方案
2021/05/13 Python
mysql联合索引的使用规则
2021/06/23 MySQL
SQL Server中常用截取字符串函数介绍
2022/03/16 SQL Server
cypress测试本地web应用
2022/06/01 Javascript