uniapp使用checkbox多选踩坑之路

问题描述:

uniapp使用checkbox多选 取消选中时无法获取当前点击的value
选中时
取消选中时

这是错误代码:

<view class="intro" v-for="(item,index) in data" :key="item.index">
	<view class="introName"><text class="introLable">uniapp</text>{{item.ming}}
		<view v-show="isRadio" class="radio">
			<checkbox-group @change="radioChange">
				<checkbox :value="item.number"  class="radio" ></checkbox>
				</checkbox-group>
		</view>
	</view>
</view>
//JS代码
radioChange: function(evt) {
	console.log('点击name',evt)
	this.value=evt.target.value
		if (!evt.target.value.length == 0) {
			for (let i = 0; i < this.data.length; i++) {
				if (!(this.data[i] === evt.target.value[0])) {
					this.value.push(evt.target.value[0])
					break
				}
			}
		} else {
			取消选中时删除 
			this.value.splice(this.userData.findIndex(item => item === evt.target.value[0]), 1)//这里获取不到evt.target.value[0]
		}
	},

原因分析:

for循环时连带checkbox-group都被循环了,不是一个整体所以拿不到。


解决方案:checkbox-group放到for循环外面

<checkbox-group @change="radioChange">//checkbox-group不能放到循环里面
	<view class="intro" v-for="(item,index) in data" :key="item.index">
		<view class="introName"><text class="introLable">用户名</text>{{item.ming}}
			<view v-show="isRadio" class="radio">
					<checkbox :value="item.number"  class="radio" ></checkbox>
			</view>
		</view>
	</view>
</checkbox-group>
//JS代码
	radioChange: function(evt) {
		this.value=evt.target.value
			console.log(this.value)
		},

此时不再需要判断是否选中,组件自带value新增与删除

成功解决
特此记录

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
uniapp中,将单选变为多选可以通过以下步骤实现: 1. 首先,需要在页面中将单选的选项改为多选的选项。可以使用`<checkbox>`标签来实现多选,将原来的`<radio>`标签改为`<checkbox>`标签。 2. 其次,需要在页面的data中添加一个数组来保存多选的选项值。可以在`data`中定义一个`selectedOptions`数组,用于存储选中的选项值。 3. 在`checkbox`标签中添加`@change`事件,将选中的选项值添加或删除到`selectedOptions`数组中,以此来实现多选功能。可以在`methods`中定义一个方法,当`checkbox`选项改变时触发该方法,在方法中判断选项值是否已经存在于`selectedOptions`数组中,如果存在则将其移除,如果不存在则将其添加到数组中。 4. 最后,可以在提交或保存数据时使用`selectedOptions`数组来获取所有选中的选项值。 综上所述,以上是将uniapp中的单选变为多选的步骤。通过修改页面中的选项标签、添加一个数组来保存选中的选项值,并在`checkbox`的`@change`事件中添加相应的处理逻辑,即可实现多选功能。<span class="em">1</span> #### 引用[.reference_title] - *1* [uniapp+unicloud 随机题库 在线答题 排行榜 专属用户 观众登录 判断题 多选 单选题](https://download.csdn.net/download/m0_59153175/86402733)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值