关于uniapp checkbox复选框问题 最多限制两个以及多个的选项

以下是根据uniapp官网给的代码改写的,理解后发现@change是每点击一次就触发一次checkboxChange函数,想了很久,用一个count来计数,每点击一次,会循环遍历整个选项,凡是有点击的,则会状态变为true,从而count也会自增一,从而最终提交check,看count的值就行。

<checkbox-group @change="checkboxChange">
                <label  v-for="item in items" :key="item.value">
                    <view>
                        <checkbox :value="item.value" :checked="item.checked" />{{item.name}}
                    </view>

                </label>
            </checkbox-group>
checkboxChange: function (e){
						var items = this.items;
						var	values = e.detail.value;
						this.count=0;
						for (var i = 0, lenI = items.length; i < lenI; ++i) {
								const item = items[i]
								if(values.includes(item.value)){
								this.$set(item,'checked',true)
								this.count++
								}else{
								this.$set(item,'checked',false)
								}
							}
					},	
check:function  () {
						//const userid = uni.getStorageSync('userinfoA').userid	
						const userid = 1
						if(!userid){
							uni.showToast({
							  title: '请您先登录!',
							  icon: 'none'
							})
							return
						}
						 
						else if(this.count>2)
						{
							uni.showToast({
							  title: '选择过多,最多选取两项',
							  icon: 'none'
							})
							
						}
						else if(this.count==0)
						{
							uni.showToast({
							  title: '请选择至少一项!',
							  icon: 'none'
							})
							
						}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值