其他分享
首页 > 其他分享> > uniapp 复选框 是否选中取值

uniapp 复选框 是否选中取值

作者:互联网

uniapp js 根据复选框 取值

<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>

标签:uniapp,false,price,invoiceList,复选框,isChecked,invoice,var,取值
来源: https://blog.csdn.net/weixin_43457011/article/details/112655880