uniapp 实现单选多选

template

<template>
	<view>
		<view class="list-item" v-for="(item, index) in goodList" :key="index">
			<view class="group">
				<checkbox-group @change="changeitem(item)" checked class="checkbox"><checkbox :value="item.unitPrice" :checked="item.checked" /></checkbox-group>

				<image :src="item.src"></image>
				<view class="goods">
					<view class="price">￥{{ item.unitPrice }}</view>
					<view class="name">{{ item.name }}</view>
					<view class="order-info">
						<view>产地：{{ item.home }}</view>
						<view>{{ item.level }}</view>
						<view>{{ item.speci }}</view>
					</view>

					<view class="subtotal">
						<view class="text">
							<view>单品小计：</view>
							<view>￥{{ item.subtotal }}</view>
						</view>
						<view class="number"><wm-numberBox :value="item.numberBox" model="1" @change="addShopCart($event, item, index)"></wm-numberBox></view>
					</view>
				</view>
			</view>
		</view>
		<view class="foot-box3">
			<view class="checkbox">
				<checkbox-group @change="selectAll"><checkbox :checked="allChecked">全选</checkbox></checkbox-group>
			</view>

			<view class="total-box">
				<view class="total">合计：￥{{ totalPrice }}</view>
				<view class="btn"><button class="foot-btn" @click="settlement">结算</button></view>
			</view>
		</view>
	</view>
</template>

js

data() {
		return {
			goodList: [
				{
					id: 0,
					src: '../../static/bg/user.jpg',
					unitPrice: '100',
					name: '蓝猫',
					home: '斯阔猫舍',
					level: '特级',
					age: '3',
					subtotal: '23',
					numberBox: 1,
					checked: false
				},
				{
					id: 1,
					src: '../../static/bg/wallet.png',
					unitPrice: '200',
					name:'美短',
					home: '时光猫舍',
					level: '特级',
					age: '5',
					subtotal: '50',
					numberBox: 1,
					checked: false
				}
			],
			checkList: [], //选中值
			allChecked: false //是否全选
		};
	},
	//计算总价
	computed: {
		totalPrice() {
			let totalPrice = 0;
			this.goodList.map(item => {
				item.checked ? (totalPrice += item.numberBox * item.unitPrice) : (totalPrice += 0);
			});
			return totalPrice;
		}
	},
	methods: {
		//单选
		changeitem(item) {
			item.checked = !item.checked;
			if (!item.checked) {
				this.allChecked = false;
			} else {
				// 判断每一个商品是否是被选择的状态
				const cartList = this.goodList.every(item => {
					return item.checked === true;
				});
				if (cartList) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			}
		},
		//全选，全不选
		selectAll() {
			this.allChecked = !this.allChecked;
			if (this.allChecked) {
				this.goodList.map(item => {
					item.checked = true;
				});
			} else {
				this.goodList.map(item => {
					item.checked = false;
				});
			}
		},settlement(){
			this.checkList=[]
			this.goodList.map((item)=>{
				if(item.checked){
					return this.checkList.push(item.id)
				}
			})
			console.log(this.checkList,'this.checkList')
		}
	}

注意：拿到数据后需要遍历数据 给每一项加一个checked属性（后端可不会给你加）