uniapp复选框 实现排他选项

选择了排他选项之后 复选框其他选项不可以选择
在这里插入图片描述






<view class="reportData" v-for="(val, index) in obj" :key="index">
<view v-if="val.type ==3" >
	<u-checkbox-group v-model="optionValue" placement="column"
		@change="(e) =>checkboxChange(e, val)">
						<view v-for="(item, i) in val.optionInfoList" :key="i">
							<u-checkbox :customStyle="{marginBottom: '20rpx'}" :label="item.optionName"
								:name="item.optionName">
							</u-checkbox>
						</view>
					
					</u-checkbox-group>
				</view>
</view>
<script>
	export default {
	data(){
		return {
		obj:"",
		optionValue:''
		}
	},
	onLoad(){
		this.init()
	},
	methods:{
		init(){
		//假设后台返回的数据格式
			res={
			    "code":0,
			    "msg":null,
			    "data":{
			        "name":"排他选择的问卷调查",
			        "questionInfoList":[
			            {
			                "id":"17",
			                "questionContent":"排他选项的题目?",
			                "type":"3",//3表示复选框
			                "optionInfoList":[ //选项
			                    {
			                        "id":"1",
			                        "optionName":"不包含选项",
			                        "optionType":"1"
			                    },
			                    {
			                        "id":"2",
			                        "optionName":"选项1",
			                        "optionType":"1"
			                    },
			                    {
			                        "id":"3",
			                        "optionName":"选项2",
			                        "optionType":"1"
			                    },
			                    {
			                        "id":"4",
			                        "optionName":"选项3",
			                        "optionType":"1"
			                    },
			                    {
			                        "id":"5",
			                        "optionName":"其他",
			                        "optionType":"1"
			                    }
			                ]
			            }
			        ]
			    }
			}}
			//对数据进行处理
			let data=res.data.questionInfoList
			this.obj=data.optionInfoList.map(item=>{
			//如果是复选框 type==3 让所有的复选框默认为false 不选中
				if(item.type==3){
					item.optionInfoList.map(sub=>{
					  sub.checked=false;
					  return sub
					})
				}
				return item
			})
		},
		checkboxFn(e, item, index,i){
				//跟新obj中的checked状态值
				this.$set(this.obj[index].optionInfoList[i],'checked',e)
				//如果选中 并且为排他选项
				if(item.optionType==1 && item.checked) {
					//对整个数据进行遍历
					let optionInfoList=this.obj[index].optionInfoList.map((rr,k)=>{
						//让排他项目选中 其他为false
						if(rr.optionType==1){
							rr.checked=true
						}else {
							rr.checked=false
						}
						return rr
					})
					//更新obj数据
					this.$set(this.obj[index],'optionInfoList',optionInfoList)
				}else {
					//如果选中 并且部位排他项 则 排他项为false 其他根据选择的情况而定
					let optionInfoList=this.obj[index].optionInfoList.map((rr,k)=>{
						if(rr.optionType==1){
							console.log(11)
							rr.checked=false
							
						}
						return rr
					})
					this.$set(this.obj[index],'optionInfoList',optionInfoList)
				}
			},
			//
			checkboxChange(e, val, index) {
				
			}
	}

</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/346651.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

orm-04-Spring Data JPA 入门介绍

拓展阅读 The jdbc pool for java.(java 手写 jdbc 数据库连接池实现) The simple mybatis.&#xff08;手写简易版 mybatis&#xff09; Spring Data JPA Spring Data JPA&#xff0c;作为更大的 Spring Data 家族的一部分&#xff0c;使得基于 JPA 的仓库实现变得更加容易。…

卫星影像离线瓦片如何调用?

我们曾为你分享了按区县购买卫星影像并在线调用的方法。 于是就有朋友问&#xff0c;卫星影像瓦片可以离线调用吗&#xff1f; 当然可以&#xff0c;这里就来分享一下卫星影像瓦片离线调用的方法。 卫星影像离线瓦片如何调用&#xff1f; 这里以OpenLayers、Mapbox和Cesiu…

Google 提出稀疏注意力框架Exphormer,提升图Transformer的扩展性!

引言 Graph Transformer已成为ML的重要架构&#xff0c;它将基于序列的Transformer应用于图结构数据。然而当面对大型图数据集时&#xff0c;使用Graph Transformer会存在扩展性限制。为此&#xff0c;「Google提出了一个稀疏注意力框架Exphormer&#xff0c;它使用扩展图来提…

LeetCode-2865. 美丽塔 I

题面 给你一个长度为 n 下标从 0 开始的整数数组 maxHeights 。 你的任务是在坐标轴上建 n 座塔。第 i 座塔的下标为 i &#xff0c;高度为 heights[i] 。 如果以下条件满足&#xff0c;我们称这些塔是 美丽 的&#xff1a; 1 < heights[i] < maxHeights[i] heights 是…

音频特效SDK,满足内容生产的音频处理需求

美摄科技&#xff0c;作为音频处理技术的佼佼者&#xff0c;推出的音频特效SDK&#xff0c;旨在满足企业内容生产中的音频处理需求。这款SDK内置多种常见音频处理功能&#xff0c;如音频变声、均衡器、淡入淡出、音频变调等&#xff0c;帮助企业轻松应对各种音频处理挑战。 一…

启动mitmproxy报错 ImportError: cannot import name ‘url_quote‘ from ‘werkzeug.urls‘

报错截图 ImportError: cannot import name url_quote from werkzeug.urls (d:\soft\python\python38\lib\site-packages\werkzeug\urls.py) 原因是Werkzeug版本不兼容导致 解决方法 pip install Werkzeug2.2.2

Java-NIO篇章(5)——Reactor反应器模式

前面已经讲过了Java-NIO中的三大核心组件Selector、Channel、Buffer&#xff0c;现在组件我们回了&#xff0c;但是如何实现一个超级高并发的socket网络通信程序呢&#xff1f;假设&#xff0c;我们只有一台内存为32G的Intel-i710八核的机器&#xff0c;如何实现同时2万个客户端…

【云原生】Docker的端口映射、数据卷、数据卷容器、容器互联

目录 一、端口映射&#xff08;相当于添加iptables的DANT&#xff09; 二、数据卷创建&#xff08;宿主机目录或文件挂载到容器中&#xff09; 三、数据卷容器&#xff08;多个容器通过同一个数据卷容器为基点&#xff0c;实现所有容器数据共享&#xff09; 四、容器互联&am…

Docker容器引擎(2)

目录 一.批量删除镜像&#xff0c;容器 二.Docker 网络实现原理 随机映射端口&#xff08;从32768开始&#xff09; 访问自己&#xff1a; 在10服务器上配置路由转发&#xff1a; 指定映射端口&#xff1a; 查看容器的输出和日志信息&#xff1a; 将宿主机目标|文件挂载…

司铭宇老师:员工心态培训:正确对待工作的七种心态:让你在工作中游刃有余

员工心态培训&#xff1a;正确对待工作的七种心态&#xff1a;让你在工作中游刃有余 工作&#xff0c;是我们生活的核心组成部分。它不仅关乎我们的物质生活&#xff0c;更影响着我们的精神世界。如何在工作中找到平衡&#xff0c;实现自我价值&#xff0c;成为许多人心中的困…

oracle19.22的patch已发布

2024年01月16日,oracle发布了19.22的patch 具体patch如下 Reserved for Database - Do not edit or delete (Doc ID 19202401.9) 文档ID规则如下 19(版本)+年份(202x)+(季度首月01,04,07,10).9 往期patch no信息和下载参考文档 oracle 19C Release Update patch num…

Allegro因为精度问题导致走线未连接上的解决办法

Allegro因为精度问题导致走线未连接上的解决办法。还有在用Allegro进行PCB设计时,因为不小心操作移动了芯片,导致导线和引脚未连接上,也可以使用这个方法。 选择菜单Tools→Derive Connectivity(获取连接) 跳出下面的对话框, Convert Line to Connect Lines

SQL注入实战:宽字节注入

一、宽字节概率 1、单字节字符集:所有的字符都使用一个字节来表示&#xff0c;比如 ASCII编码(0-127) 2、多字节字符集:在多字节字符集中&#xff0c;一部分字符用多个字节来表示&#xff0c;另一部分字符(可能没有)用 单个字节来表示。 3、宽字节注入是利用mysql的一个特性…

人工智能在教学领域中有哪些运用?

人工智能在教学领域中可以有以下几种运用&#xff1a; 1. 智能辅助教学&#xff1a;利用人工智能技术开发出智能辅助教学系统&#xff0c;根据学生的学习状态和知识背景&#xff0c;提供个性化的学习路径和推荐的学习资源&#xff0c;帮助学生更好地掌握知识。 2. 自适应评估…

如何使用宝塔面板配置Nginx反向代理WebSocket(wss)

本章教程&#xff0c;主要介绍一下在宝塔面板中如何配置websocket wss的具体过程。 目录 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 2、代理配置内容 三、注意事项 一、添加站点 二、申请证书 三、配置代理 1、增加配置内容 map $http_upgrade $connection_…

Biotin-PEG4-TSA,生物素-PEG4-酪胺,用于标记蛋白质、核酸等生物分子

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;Biotin-PEG4-Tyramide&#xff0c;Biotin-PEG4-TSA&#xff0c;生物素-PEG4-酪胺&#xff0c;Biotin PEG4 Tyramide&#xff0c;Biotin PEG4 TSA 一、基本信息 产品简介&#xff1a;Biotin PEG4 Tyramide is compos…

【力扣每日一题】力扣2859计算k位置下标对应元素的和(bitCount源码分析及实现)

题目来源 力扣2859计算k位置下标对应元素的和 题目概述 给你一个下标从 0 开始的整数数组 nums 和一个整数 k 。 请你用整数形式返回 nums 中的特定元素之 和 &#xff0c;这些特定元素满足&#xff1a;其对应下标的二进制表示中恰存在 k 个置位。 整数的二进制表示中的 1…

老子云-三维模型优化

轻量化服务 减面模式 适用于家装、游戏、电商产品等需要保留部件且精细结构多的模型 保留原始模型网格对象、UV和动画&#xff0c;仅使模型网格更轻量&#xff0c;新增GPU减面模式(限时体验)&#xff0c;省时更精细 合并模式 不保留原始模型网格和动画&#xff0c;适用于数…

【linux】远程桌面连接到Debian

远程桌面连接到Debian系统&#xff0c;可以使用以下几种工具&#xff1a; 1. VNC (Virtual Network Computing) VNC&#xff08;Virtual Network Computing&#xff09;是一种流行的远程桌面解决方案&#xff0c;它使用RFB&#xff08;Remote Framebuffer Protocol&#xff0…

系统引导程序 Boot Loader——学习笔记

基于嵌入式Linux 的完整系统软件由三个部分组成&#xff1a;系统引导程序、Linux 操作系统内核和文件系统。 系统引导程序 Boot Loader 是系统加电后运行的第一段软件代码&#xff0c;它的作用是加载操作系统或者其他程序到内存中&#xff0c;并将控制权交给它们。 Boot Load…