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>
原文地址：https://blog.csdn.net/weixin_43457011/article/details/112655880
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。