uniapp 复选框 是否选中取值

uniapp js 根据复选框 取值

• 对列表的数据加标记
• 选中为true 非true为没有选中
• 每勾选一次 循环计算一次 总数就是选中数
• 选中存 <序号、是否选中>对象
• 数组去掉选中 循环数组 找到对应的 进行移除

<view class="top">
		<view v-for="(item,index) in invoiceList" :key="item.index"  @click="selectItem(index)">
			<view class="inovice">
				<view class="box1">
					<checkbox :checked="item.isChecked"></checkbox>
				</view>
				<view class="box3">
					{{item.price}}元
				</view>
			</view>
			<view class="bot"></view>
		</view>
		<!--底部选项-->
		<view class="bot_tar">
			<checkbox @click="selectAll" :checked="isSelectAll">全选</checkbox>
			<text>{{selectCount}}个行程，共{{allPrice}}元</text>
		</view>
	</view>

<script>
	export default {
		data() {
			return {
				selectCount:0,
				invoiceList: [{
						price: 28.72,
						isChecked:false
					},
					{
						price: 18,
						isChecked:false
					},
					{
						price: 28,
						isChecked:false
					},
					{
						price: 40,
						isChecked:false
					}
				],
				isSelectAll: false,
				allPrice: 0
			}
		},
		methods: {
			selectAll() {
				this.isSelectAll = !this.isSelectAll;//取反
				for(var i=0;i<this.invoiceList.length;i++){//循环
					var invoice = this.invoiceList[i];//变量 invoice == 数组每一项
					invoice.isChecked = this.isSelectAll;//  赋值
				}
				this.calcCount();//调用函数
			},
			selectItem(index) {
 				var invoice =  this.invoiceList[index];//变量 invoice == 数组每一项索引
				if(invoice){
					invoice.isChecked = !invoice.isChecked   //取反
				} 
				 this.calcCount();//调用函数
			
			},
			calcCount(){
				this.selectCount = 0;
				this.allPrice = 0 ;
				for(var i=0;i<this.invoiceList.length;i++){ 
					var invoice = this.invoiceList[i];
					var allPrice = this.invoiceList[i].price;
					if(invoice.isChecked){   //判断是否为true，if条件判断，为真时执行，默认·是false “复选框 属性选中时为true”
						this.selectCount++;//递增
						this.allPrice += this.invoiceList[i].price//累加
					}
				}
			}
		},
		onLoad() {
            
        }
	}
</script>