uni-app购物车全选

青旅半醒 2022-11-11 05:27 310阅读 0赞

## uni-app购物车全选 ##

**思路：** 选中的数据归到一条数组 判断长度是否和数组长度相同

<u-checkbox-group @change="checkboxGroupChange" :wrap="true">
    	<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.name" v-for="(item, index) in goodsList" :key="index" shape="circle" active-color="#5FC484" class="goodsList">
    		<view class="goods">
    					
    		</view>
    	</u-checkbox>
    </u-checkbox-group>
    
    <u-checkbox v-model="checkedAll" @change="checkedAllGoods" shape="circle" active-color="#5FC484"></u-checkbox>

goodsList: [{ checked: false}, { checked: false}],
    sellectList:[],//选中的数据
    checkedAll: false
    
    
    // 选中任一checkbox时，由checkbox-group触发
    checkboxGroupChange(e) { 
        this.sellectList =[]
    	this.goodsList.map(res =>{ 
    	    if(res.checked == true) this.sellectList.push(res)
    		if(this.sellectList.length == this.goodsList.length){ 
    			this.checkedAll = true
    		} else{ 
    			this.checkedAll = false
    		}
    					
    	})
    },
    // 全选
    checkedAllGoods() { 
    	this.goodsList.map(val => { 
    		val.checked = !this.checkedAll;
    	})
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，310人围观）

还没有评论，来说两句吧...

相关阅读

相关 UNIAPP实战项目笔记34 购物车的单选和全选单选联动

UNIAPP实战项目笔记34 购物车的单选和全选单选联动通过mapGetters,mapMutations实现此功能在 shopcart.vue中使用,

港控/mmm°/ 2024年04月01日 13:29/ 0 赞/ 81 阅读

相关 UNIAPP实战项目笔记33 购物车的全选和全不选功能

UNIAPP实战项目笔记33 购物车的全选和全不选功能核心代码一 cart.js export default{ sta

Love The Way You Lie/ 2024年04月01日 13:27/ 0 赞/ 97 阅读

相关购物车实现单选、多选、全选和一些fragment的布局

//首先是展示Fragment的布局 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xm

痛定思痛。/ 2023年10月17日 21:59/ 0 赞/ 52 阅读

相关 uni-app购物车-全选、反选、逐个选中

这里要实现的需求是： 1，点击全选，则全选，再次点击，则取反 2，全选状态下，取消某一个商品，则全选状态消失 3，有些选中，有些没选的状态下，勾选上所有商品，则全选

朱雀/ 2023年07月25日 06:27/ 0 赞/ 342 阅读

相关简易购物车【加全选全不选计算属性和侦听属性】

HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

小咪咪/ 2023年02月26日 04:27/ 0 赞/ 23 阅读

相关 uni-app购物车全选

uni-app购物车全选思路：选中的数据归到一条数组判断长度是否和数组长度相同 <u-checkbox-group @change="checkboxGr

青旅半醒/ 2022年11月11日 05:27/ 0 赞/ 311 阅读

相关购物车分店铺，全选，店铺全选，计算，增加商品，APP购物车，类似淘宝购物车

基于vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

不念不忘少年蓝@/ 2022年05月26日 13:39/ 0 赞/ 250 阅读

相关 js_实现购物车全选以及取消全选的效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

水深无声/ 2022年05月19日 05:20/ 0 赞/ 256 阅读

相关 jquery实现购物车全选反选功能

利用jquery实现购物车中全选（反选）换图功能，具体代码如下： <!DOCTYPE html> <html lang="en"> <head>

小鱼儿/ 2022年05月15日 10:29/ 0 赞/ 262 阅读

相关 21、【购物车模块】——全选、全反选、单选、单反选、查询购物车商品数量功能开发

\\\\1、接口开发： \\\\\\1、全选接口开发： `Controller`: //全选 @RequestMapping("select_

谁借莪１个温暖的怀抱￠/ 2022年05月06日 01:28/ 0 赞/ 209 阅读