uniapp中的购物车全选多选实例（ checkbox ）

checkbox-group

多项选择器，内部由多个 checkbox 组成。

属性说明

属性名	类型	默认值	说明
@change	EventHandle		<checkbox-group>中选中项发生改变是触发 change 事件，detail = {value:[选中的checkbox的value的数组]}

checkbox

多选项目。

属性说

属性名	类型	默认值	说明
value	String		<checkbox> 标识，选中时触发 <checkbox-group> 的 change 事件，并携带 <checkbox> 的 value。
disabled	Boolean	false	是否禁用
checked	Boolean	false	当前是否选中，可用来设置默认选中
color	Color		checkbox的颜色，同css的color

---

checkbox全选多选 (效果图，Html，Css，Script)

<template>
	<view>
		<view class="search">
			<view class="searchIput">
				<input type="text" placeholder="输入你要搜索的内容" placeholder-style='color:grey' v-model="inputs">
				<image src='@/static/search.png' />
			</view>
		</view>
		<view class="dataInfo">
			<view class="dataList" v-for="(item,index) in searchData" :key="index">
				<checkbox-group @change="checkClick(item)">
					<checkbox :checked="item.checked" />
				</checkbox-group>
				<view class="details">
					<view class="img">
						<image :src="item.url"></image>
					</view>
					<view class="text">
						<text>{{item.name}}</text>
						<text>{{item.trip}}</text>
						<text>￥{{item.price}}/张</text>
					</view>
				</view>
				<view class="action">
					<text @click="reduce(item)">-</text>
					<text>{{item.num}}</text>
					<text @click="add(item)">+</text>
				</view>
			</view>
		</view>
		<view class="buy">
			<view class="checked">
				<checkbox-group @tap="checkAll">
					<checkbox :checked="allChecked" />
				</checkbox-group>
				<text>全选</text>
			</view>
			<view class="total">
				<view class="price">
					<text>总计：</text>
					<text>￥{{totalPrice}}</text>
				</view>
				<view class="bill">
					<text>结算</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				allChecked: false,
				inputs: "",
				list: [{
						trip: "飞机-轮船-国际火车",
						num: 1,
						checked: false,
						price: 149,
						name: '波兰斯维诺乌伊希切',
						url: "https://img-blog.csdnimg.cn/2ebd84257f154cb8848aab94dd663bb4.png",
					},
					{
						trip: "飞机-轮船-国际火车",
						num: 1,
						checked: false,
						price: 240,
						name: '冰岛尼斯湖',
						url: "https://img-blog.csdnimg.cn/6cc01905e7e942bdadb574af1079ae15.png",
					},
					{
						trip: "飞机-轮船-汽车-火车",
						num: 1,
						checked: false,
						price: 410,
						name: '云南西双版纳',
						url: "https://img-blog.csdnimg.cn/23ad5958b6534375b42cee837eeaefbf.png",
					},
					{
						trip: "飞机-轮船-汽车-火车",
						num: 1,
						checked: false,
						price: 500,
						name: '阿尔卑斯雪山',
						url: "https://img-blog.csdnimg.cn/8717f0e8d2b64efebcdc9c506a39bd61.png",
					},
				],
			}
		},
		computed: {
			totalPrice() {
				//总计金额
				var str = 0;
				for (var i = 0; i < this.searchData.length; i++) {
					if (this.searchData[i].checked) {
						str += this.searchData[i].num * this.searchData[i].price;
					}
				}
				return str;
			},
			searchData: function() {
				//模糊查询
				if (!this.inputs) {
					return this.list;
				}
				return this.list.filter((item) => {
					return item.name.includes(this.inputs);
				});
			},
		},
		methods: {
			add(item) { //加加
				let num = item.num
				item.num = num + 1
			},
			reduce(item) { //减减
				let num = item.num
				if (num > 1) {
					num -= 1
				} else if (num = 1) {
					uni.showToast({
						title: "该宝贝不能减少了哟~"
					})
				}
				item.num = num
			},
			// 单个商品的选择
			checkClick(item) {
				item.checked = !item.checked
				if (!item.checked) {
					this.allChecked = false
				} else {
					// 判断每一个商品是否是被选择的状态
					const goods = this.list.every(item => {
						return item.checked === true
					})
					if (goods) {
						this.allChecked = true
					} else {
						this.allChecked = false
					}
				}
			},
			//全选、全不选
			checkAll() {
				this.allChecked = !this.allChecked
				if (this.allChecked) {
					this.list.map(item => {
						item.checked = true
					})
				} else {
					this.list.map(item => {
						item.checked = false
					})
				}
			}
		}
	}
</script>


<style>
	/deep/uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
	}

	/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
		border-color: #ddd;
		color: #fff !important;
		background-color: #2DCF8C !important;
	}

	/deep/uni-checkbox .uni-checkbox-input {
		border-color: #ddd;
	}

	/deep/uni-checkbox .uni-checkbox-input:hover {
		border-color: #ddd;
	}

	.search {
		padding-top: 20rpx;
	}

	.search .searchIput {
		background-color: #e6e6e6;
		width: 95%;
		margin: 0 auto;
		height: 72rpx;
		line-height: 72rpx;
		border-radius: 50rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.search .searchIput input {
		font-size: 26rpx;
		width: 100%;
		color: grey;
	}

	.search .searchIput image {
		width: 34rpx;
		height: 34rpx;
	}



	.dataInfo {
		width: 95%;
		margin: 0 auto;
	}

	.dataInfo .dataList {
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2px solid #F1F1F1;
		padding: 25rpx 0;
	}

	.dataInfo .dataList .details {
		display: flex;
		align-items: center;
		flex: 1;
		font-size: 0;
	}

	.dataInfo .dataList .details .img image {
		width: 200rpx;
		height: 140rpx;
		padding: 0 20rpx;
	}

	.dataInfo .dataList .details .text text {
		color: #000;
		font-size: 23rpx;
		display: block;
		padding: 10rpx 0;
	}

	.dataInfo .dataList .details .text text:last-child {
		color: red;
		font-size: 25rpx;
	}

	.dataInfo .dataList .action text {
		font-size: 25rpx;
		color: #000;
		border: 1px solid #C8C7CC;
		display: inline-block;
		line-height: 50rpx;
		width: 60rpx;
		text-align: center;
		box-sizing: border-box;
	}

	.dataInfo .dataList .action text:nth-child(2) {
		border-left: none;
		border-right: none;
	}

	.buy {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 50%;
		bottom: 0;
		width: 95%;
		transform: translate(-50%, 0);
	}

	.buy .checked {
		display: flex;
		align-items: center;
	}

	.buy .checked text {
		font-size: 25rpx;
		color: #000;
		padding: 0 12rpx;
	}

	.buy .total {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.buy .total .price {
		padding-right: 20rpx;

	}

	.buy .total .price text {
		font-size: 27rpx;
		color: #C8C7CC;
		display: inline-block;
	}

	.buy .total .price text:last-child {
		color: red;
		font-weight: bold;
	}

	.buy .total .bill text {
		font-size: 25rpx;
		color: #fff;
		display: inline-block;
		background-color: red;
		line-height: 70rpx;
		width: 150rpx;
		text-align: center;
	}
</style>

---

后续开展 

<template>
	<view class="content">
		<view class="title">
			<text>Web前端框架工具学习</text>
		</view>
		<view class="checkInfo">
			<view class="dataInfo">
				<!-- 全选开始 -->
				<checkbox-group @change="allChoose">
					<view class="checkAll">
						<text>全选</text>
						<checkbox value="all" :class="{'checked':allChecked}" :checked="allChecked?true:false">
						</checkbox>
					</view>
				</checkbox-group>
				<!-- 全选结束 -->
				<!-- 列表内容开始 -->
				<checkbox-group @change="changeCheckbox">
					<view class="dataList" v-for="(item,index) in dataList" :key='index'>
						<view class="textImg">
							<view class="img">
								<image :src="item.imgUrl" mode="widthFix"></image>
							</view>
							<view class="text">
								<text>{{item.title}}</text>
								<text>{{item.url}}</text>
							</view>
						</view>
						<view class="checkBox">
							<checkbox :value="String(item.titleId)" :checked="checkedArr.includes(String(item.titleId))"
								:class="{'checked':checkedArr.includes(String(item.titleId))}"></checkbox>
						</view>
					</view>
				</checkbox-group>
				<!-- 列表内容结束 -->
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
					imgUrl: 'https://tilin.gitee.io/super_hero_preview/static/icons/uniapp.png',
					title: 'UniApp',
					url: 'https://uniapp.dcloud.io/',
					titleId: 1
				}, {
					imgUrl: 'https://tilin.gitee.io/super_hero_preview/static/icons/github.png',
					title: 'GitHub',
					url: 'https://github.com/',
					titleId: 2
				}, {
					imgUrl: 'https://gitee.com/assets/favicon.ico',
					title: 'Giee',
					url: 'https://gitee.com/',
					titleId: 3
				}, {
					imgUrl: 'https://www.runoob.com/wp-content/uploads/2017/01/vue.png',
					title: 'Vue',
					url: 'https://cn.vuejs.org/',
					titleId: 4
				}, {
					imgUrl: 'https://www.runoob.com/wp-content/uploads/2016/02/react.png',
					title: 'React',
					url: 'https://react.docschina.org/',
					titleId: 5
				}, {
					imgUrl: 'https://www.runoob.com/wp-content/uploads/2014/06/angular.jpg',
					title: 'AngularJS',
					url: 'https://www.angularjs.net.cn/',
					titleId: 6
				}],
				checkedArr: [], //复选框选中的值
				allChecked: false //是否全选
			}
		},
		methods: {
			changeCheckbox(e) {
				this.checkedArr = e.detail.value;
				// 如果选择的数组中有值，并且长度等于列表的长度，就是全选
				if (this.checkedArr.length > 0 && this.checkedArr.length == this.dataList.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},
			allChoose(e) {
				let chooseItem = e.detail.value;
				// 全选
				if (chooseItem[0] == 'all') {
					this.allChecked = true;
					for (let item of this.dataList) {
						let itemId = String(item.titleId);
						if (!this.checkedArr.includes(itemId)) {
							this.checkedArr.push(itemId);
						}
					}
				} else {
					// 取消全选
					this.allChecked = false;
					this.checkedArr = [];
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.title {
			text-align: center;
			padding: 30rpx 0;

			text {
				color: #dedede;
				font-size: 55rpx;
				text-align: center;
				letter-spacing: 6rpx;
				text-shadow: 2rpx 2rpx 8rpx #000;
				opacity: .32;
			}
		}

		.checkInfo {
			/deep/uni-checkbox .uni-checkbox-input {
				border-radius: 50%;
			}

			/deep/uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
				border-color: #ddd;
				color: #fff !important;
				background-color: #2DCF8C !important;
			}

			/deep/uni-checkbox .uni-checkbox-input {
				border-color: #ddd;
			}

			/deep/uni-checkbox .uni-checkbox-input:hover {
				border-color: #ddd;
			}

			.dataInfo {
				width: 90%;
				margin: 0 auto;

				.checkAll {
					display: flex;
					justify-content: space-between;
				}

				.dataList {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #E7E9EE;
					padding-bottom: 10px;
					padding-top: 10px;

					.textImg {
						display: flex;
						align-items: center;

						.img {
							border: 1px solid #E7E9EE;
							padding: 10rpx;

							image {
								width: 90rpx;
								height: 90rpx;
								display: block;
							}
						}

						.text {
							padding-left: 20rpx;

							text {
								display: block;
								font-size: 30rpx;
								color: #000;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
</style>