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


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 相关文章推荐
List Installed Software Features
Jun 11 Javascript
Jquery 组合form元素为json格式,asp.net反序列化
Jul 09 Javascript
javascript截取字符串(通过substring实现并支持中英文混合)
Jun 24 Javascript
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
Dec 18 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
详解JavaScript的变量
Apr 04 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
解决vue初始化项目一直停在downloading template的问题
Nov 09 Javascript
JS数组去重详情
Nov 07 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生成静态页面详解
2006/12/05 PHP
一个PHP针对数字的加密解密类
2014/03/20 PHP
PHP ignore_user_abort函数详细介绍和使用实例
2014/07/15 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
PHP实现计算器小功能
2020/08/28 PHP
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
javascript实现的字符串与十六进制表示字符串相互转换方法
2015/07/17 Javascript
详解JavaScript for循环中发送AJAX请求问题
2020/06/23 Javascript
浅谈Vue-cli 命令行工具分析
2017/11/22 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
浅谈redux以及react-redux简单实现
2018/08/28 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
最简单的vue消息提示全局组件的方法
2019/06/16 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
过滤器vue.filters的使用方法实现
2019/09/18 Javascript
vue 取出v-for循环中的index值实例
2019/11/09 Javascript
webpack.DefinePlugin与cross-env区别详解
2020/02/23 Javascript
js+canvas实现纸牌游戏
2020/03/16 Javascript
跟老齐学Python之类的细节
2014/10/13 Python
关于Python的一些学习总结
2018/05/25 Python
Python使用一行代码获取上个月是几月
2018/08/30 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
PyCharm搭建Spark开发环境的实现步骤
2019/09/05 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
全球领先的中国制造商品在线批发平台:DHgate
2020/01/28 全球购物
中学生操行评语大全
2014/04/24 职场文书
基层党支部公开承诺书
2014/05/29 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
出售房屋委托书范本
2014/09/24 职场文书
劳模事迹材料范文
2014/12/24 职场文书
共青团优秀团员申请书(范文)
2019/08/15 职场文书