uniapp多选框获取选中以及取消的值

最新推荐文章于 2025-04-17 09:39:55 发布

小红花~

最新推荐文章于 2025-04-17 09:39:55 发布

阅读量2.9k

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_40570474/article/details/118502117

版权

本文详细介绍了如何使用uni-app框架创建一个底部弹出框选择支付方式的组件，包括多选框的点击事件处理、数据绑定和默认选中项设置。在事件处理中，展示了如何获取选中项的值并以逗号分隔的方式传递给后台。此外，还展示了如何通过v-model动态监听复选框的变化，并提供了取消和确认操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<uni-popup ref="typePopup" type="bottom" :maskClick="false" class="popup-mask">
           <view class="type-popup">
               <view class="pop-top-title">选择收款方式
                   <text class="pop-top-title-text">(可多选)</text>
               </view>
               <view class="action-sheet">
                   
                   <checkbox-group @change="checkboxClick" v-model="checkedList">
                       <label style="display: flex;flex-direction: row;font-size: 28upx;">
                           <label>
                               <view class="action-sheet-item" v-for="(item,index) in list" :key="index"
                                   @click="sellItem(index)">
                                   <checkbox :value="item.pay_type_name"
                                       :checked="item.checked">
                                       <view class="action-sheet-item-left">
                                           <text>{{item.pay_type_name}}</text>
                                           <view class="action-sheet-item-left-bg">
                                               <image src="../../static/images/otc/alipay.png"
                                                   v-if="item.pay_type == 2" class="action-sheet-item-image"></image>
                                               <image src="../../static/images/otc/we-chat.png" v-if="item.pay_type==3"
                                                   class="action-sheet-item-image"></image>
                                               <image src="../../static/images/otc/bank-card.png"
                                                   v-if="item.pay_type==1" class="action-sheet-item-image"></image>
                                           </view>
                                       </view>
                                   </checkbox>
                               </view>
                           </label>
                       </label>

</checkbox-group>
                   
                   
               </view>
               <img src="/static/images/close1.png" class="my-close" @click="currencyClose">
               <view class="box">
                   <view class="type-popup-cancel type-popup-btn" @click="caneclType()">取消</view>
                   <view class="type-popup-sure type-popup-btn" @click="sure()">确认</view>
               </view>
           </view>
       </uni-popup>

//点击事件

//点击多选框
           checkboxClick(e) {
               console.log('eee', e)
               this.checkedList = e.detail.value //定义namesel获取复选框的数组值
               this.typeName = this.checkedList //自动获取到删除或者添加的值，不用手动追加比如点击支付宝，和微信就是支付宝和微信
               console.log(this.checkedList)
               this.checkedList = this.checkedList.join(",") //以逗号隔开向后台传递
               console.log('namesel的值', this.checkedList)

//默认选中第一个

for(let i=0;i<this.list.length;i++){
                               if(res.data[i].pay_type_name ==res.data[0].pay_type_name) {
                                   this.list[i].checked = true
                                   console.log("checked")
                                   this.typeName = res.data[0].pay_type_name
                               }
                               else{
                                   this.list[i].checked = false
                               }

                           }

注意:一定要加v-model 动态监听变化其次要加 item.chencked.