uniapp:单选、多选、文本（使用radio等组件，先整理参数再提交）二

最新推荐文章于 2025-08-20 00:00:00 发布
原创 最新推荐文章于 2025-08-20 00:00:00 发布 · 1.5k 阅读 · 7 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端

双层循环之radio、checkbox、textarea


)
在这里插入图片描述

代码片.

// An highlighted block
<template>
	<view class="box">
		
		<view class="content">
			
			<!-- 0:单选,1:多选,2:简单回答 -->
			<view style="margin: 28rpx 0 0 0;" v-if='radioList.length>0'>
				<view v-for='(item,index) in radioList' :key='index'>
					<view class="flex item-center">
						{{index+1+'、'+item.itemName}}(单选)
					</view>
					<radio-group @change="radioChange" :class="custTypeId==0?'radio-purple':custTypeId==1?'radio-blue':'radio-green'">
							<label class="flex item-center borderbox padding" v-for="(v, i) in item.optionList" :key="i">
									<radio :value="index+','+i" :checked="v.checked"/>
									<view>{{v.value}}</view>
							</label>
					</radio-group>
				</view>
				<!-- 多选 -->
				<view v-if='checkboxList.length>0'>
					<view v-for='(item,index) in checkboxList' :key='index'>
						<view class="bold flex item-center">
							{{radioList.length+index+1+'、'+item.itemName}}(多选)
						</view>
						<checkbox-group :class="custTypeId==0?'checkbox-purple':custTypeId==1?'checkbox-blue':'checkbox-green'">
								<label class="flex item-center borderbox padding" v-for="(v,i) in item.optionList" :key="i" @click="checkBoxClick(v.id)">
									<checkbox  :checked="v.checked"/>
									<view>{{v.value}}</view>
								</label>
						</checkbox-group>
						
					</view>
				</view>
				<!-- 文本域 -->
				<view v-if='textareaList.length>0'>
					<view v-for='(item,index) in textareaList' :key='index'>
							<view class="bold flex item-center">
								{{radioList.length+checkboxList.length+index+1+'、'+item.itemName}}
							</view>
							<view class="borderbox uni-textarea" style="margin-top: 20rpx;">
								<textarea auto-blur='true'  @blur="inputValue($event,item.id,item.itemName)"  style="height:240rpx;border-radius: 8rpx;background: #F8F8F8;width:670rpx;padding: 20rpx 0 0 20rpx;" />
							</view>
						</view>
					</view>
				</view>
			<view class="footer flex item-center between">
				<view :class="custTypeId==0?'purple-bg':custTypeId==1?'blue-bg':'green-bg'" @click='submitQuestion'>提交参数</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	data() {
		return{
			custTypeId:0,
			radioList:[],
			checkboxList:[],
			textareaList:[],
			checkedRadiolist:[],
			checkedCheckboxlist:[],
			checkedTextareaList:[],
			list:[
				{
					id: "168",
					itemName: "请选择性别",
					type:0,
					optionList:[
						{
							checked: false,
							id: "10",
							value: "男"
						},
						{
							checked: false,
							id: "11",
							value: "女"
						}
					]
				},
				{
					id: "169",
					itemName: "请选择血型",
					type:0,
					optionList:[
						{
							checked: false,
							id: "12",
							value: "O"
						},
						{
							checked: false,
							id: "13",
							value: "A"
						},
						{
							checked: false,
							id: "14",
							value: "AB"
						},
						{
							checked: false,
							id: "15",
							value: "B"
						}
					]
				},
				{
					id: "170",
					itemName: "请选择爱好",
					type:1,
					optionList:[
						{
							checked: false,
							id: "16",
							value: "吃饭"
						},
						{
							checked: false,
							id: "17",
							value: "睡觉"
						},
						{
							checked: false,
							id: "18",
							value: "打豆豆"
						},
						{
							checked: false,
							id: "19",
							value: "追剧"
						}
					]
				},
				{
					id: "171",
					itemName: "喜欢的颜色",
					type:1,
					optionList:[
						{
							checked: false,
							id: "20",
							value: "蓝色"
						},
						{
							checked: false,
							id: "21",
							value: "白色"
						},
						{
							checked: false,
							id: "22",
							value: "灰色"
						},
						{
							checked: false,
							id: "23",
							value: "粉色"
						}
					]
				},
				{
					id: "172",
					itemName: "有什么好的建议",
					type: 2,
					value:''
				},
				{
					id: "173",
					itemName: "随便说点什么",
					type: 2,
					value: ''
				},
			]		 
		}
	},
	onLoad(){
		this.radioList = this.list.filter(v=>v.type==0)
		this.checkboxList = this.list.filter(v=>v.type==1)
		this.textareaList = this.list.filter(v=>v.type==2)
	},
	methods:{
		submitQuestion(){
			let paramsList = this.checkedRadiolist.concat(this.checkedCheckboxlist,this.checkedTextareaList)
			console.log('提交参数',paramsList)
		},
		inputValue:function(e,itemId,itemName){
				let obj = {
				  itemId:itemId,            							
					itemName:itemName,        							
					itemValue:e.detail.value, 							
					itemType:2, 
				}
				//去掉重复
				this.checkedTextareaList.forEach((v,i)=>{
					if(v.itemId == obj.itemId){
						this.checkedTextareaList.splice(i,1)
					}
				})
				this.checkedTextareaList.push(obj)
				//去掉空值
				this.checkedTextareaList.forEach((v,i)=>{
					if(v.itemValue==''){
						this.checkedTextareaList.splice(i,1)
					}
				})
		},
		checkBoxClick(id){
			 //每次点击数据会叠加，先清空
			 this.checkedCheckboxlist = []
			 this.checkboxList.forEach((v,i)=>{
				  v.optionList.forEach((val,index)=>{
						//(1) 把选中的改成true，其他改为false
						if(id == val.id){
							val.checked = !val.checked
						}
						//(2)选中的，拼参数
						if(val.checked){
							this.checkedCheckboxlist.push({
								 itemType:1,
								 itemId:v.id,
								 itemName:v.itemName,
								 itemValue:val.value
							})
						}
					})
			 })
		},
		radioChange:function(e){
			 let resList= e.detail.value.split(',')
			 let pIndex = resList[0],cIndex = resList[1]
			 let pItem = this.radioList[pIndex]
			 pItem.optionList.forEach((v,i)=>{
				let obj = {
					itemId:pItem.id,          						 
					itemName:pItem.itemName,  						 
					itemType:0, 
				}
				if(cIndex == i){
					v.checked = true
					obj.itemValue = v.value
					//切换时，去掉重复的
					this.checkedRadiolist.forEach((item,index)=>{
						if(item.itemId == obj.itemId){ //注意：比较的是obj中的itemId
								this.checkedRadiolist.splice(index,1)
						}
					})
					this.checkedRadiolist.push(obj)
				}else{
					v.checked = false
				}
			})
			// console.log('单选参数',this.checkedRadiolist)
		},
	}
}
</script>
<style>
	/* #ifdef H5 */
	 uni-checkbox .uni-checkbox-input{
		 width: 29rpx;
		 height: 29rpx;
		 font-size:24rpx !important;
		 border-radius: 50% !important;
	 }
	uni-radio .uni-radio-input{
		 width: 29rpx;
		 height: 29rpx;
	}
	uni-checkbox .uni-checkbox-input .uni-checkbox-input-checked{
		width: 29rpx;
		height: 29rpx; 
		color:#fff !important; 
		/* border-color: #6F4D98; */
		border-radius: 50%;
		/* background:#6F4D98!important; */
	}
	/* uni-复选-颜色改变-checked */
	.checkbox-purple .uni-checkbox-input .uni-checkbox-input-checked{
		border-color: #6F4D98;
		background:#6F4D98!important;
	}
	.checkbox-blue .uni-checkbox-input .uni-checkbox-input-checked{
		border-color: #023694;
		background:#023694!important;
	}
	.checkbox-green .uni-checkbox-input .uni-checkbox-input-checked{
		border-color: #0D6B38;
		background:#0D6B38!important;
	}
	uni-radio .uni-radio-input .uni-radio-input-checked{
	 width: 29rpx; 
	 height: 29rpx; 
	 border-radius: 50%;
	 color:#FFFFFF !important; 
	 /* background:#6F4D98!important; */
	 border-color: #E6E6E6;
	}
	/* uni-单选-改变颜色checked */
	.radio-purple .uni-radio-input .uni-radio-input-checked{
		background:#6F4D98!important;
	}
	.radio-blue .uni-radio-input .uni-radio-input-checked{
		background:#023694!important;
	}
	.radio-green .uni-radio-input .uni-radio-input-checked{
		background:#0D6B38!important;
	}
	/*  */
	uni-radio .uni-radio-input .uni-radio-input-checked::before{
		 width: 29rpx; 
		 height: 29rpx; 
		 line-height: 29rpx;
		 border-radius: 50%;
		 text-align: center;
		 font-size:24rpx;
		 color:#fff; 
		/* background: #6F4D98;
		 border-color: #6F4D98; */
		 transform:translate(-50%, -50%) scale(1);
		 -webkit-transform:translate(-50%, -50%) scale(1);
		}
		/* uni-单选-改变颜色-checked::before */
		.radio-purple .uni-radio-input .uni-radio-input-checked::before{
			background: #6F4D98;
			 border-color: #6F4D98;
		}
		.radio-blue .uni-radio-input .uni-radio-input-checked::before{
			background: #023694;
			 border-color: #023694;
		}
		.radio-green .uni-radio-input .uni-radio-input-checked::before{
			background: #0D6B38;
			 border-color:#0D6B38;
		}
		uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked::before{
			 width: 29rpx; 
			 height: 29rpx; 
			 line-height: 29rpx;
			 text-align: center;
			 border-radius: 50%;
			 font-size:32rpx; 
			 /* border-color: #6F4D98; */
		}
		/* uni-复选-改变颜色-checkbox::before */
		.checkbox-purple .uni-checkbox-input.uni-checkbox-input-checked::before{
			border-color: #6F4D98;
		}
		.checkbox-blue .uni-checkbox-input.uni-checkbox-input-checked::before{
			border-color:  #023694;
		}
		.checkbox-green .uni-checkbox-input.uni-checkbox-input-checked::before{
			border-color:  #0D6B38;
		}
	 /* #endif */
	/* #ifdef APP-PLUS ||MP-WEIXIN */
	checkbox .wx-checkbox-input {
		width: 29rpx;
		height: 29rpx;
		border-color: #E6E6E6;
		border-radius: 50% !important;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked{
		width: 29rpx;
		height: 29rpx; 
		color:#fff !important; 
		/* border-color: #6F4D98; */
		border-radius: 50%;
		/* background:#6F4D98!important; */
	}
	/* wx-复选-改变颜色-checked */
	.checkbox-purple .wx-checkbox-input.wx-checkbox-input-checked{
			border-color: #6F4D98;
			background:#6F4D98!important;
	}
	.checkbox-blue .wx-checkbox-input.wx-checkbox-input-checked{
			border-color: #023694;
			background:#023694!important;
	}
	.checkbox-green .wx-checkbox-input.wx-checkbox-input-checked{
			border-color: #0D6B38;
			background:#0D6B38!important;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
		 width: 29rpx; 
		 height: 29rpx; 
		 line-height: 29rpx;
		 text-align: center;
		 border-radius: 50%;
		 font-size:32rpx; 
		 color:#fff;
		/* background: #6F4D98;
		 border-color: #6F4D98; */
	}
	/* wx-复选-改变颜色-checked::before */
	.checkbox-purple .wx-checkbox-input.wx-checkbox-input-checked::before{
		background: #6F4D98;
		border-color: #6F4D98;
	}
	.checkbox-blue .wx-checkbox-input.wx-checkbox-input-checked::before{
		background: #023694;
		border-color: #023694;
	}
	.checkbox-green .wx-checkbox-input.wx-checkbox-input-checked::before{
		background: #0D6B38;
		border-color: #0D6B38;
	}
	radio .wx-radio-input{
		 width: 29rpx;
		 height: 29rpx;
	}
	radio .wx-radio-input.wx-radio-input-checked{
	 width: 29rpx; 
	 height: 29rpx; 
	 color:#fff !important; 
	 /* background:#6F4D98!important; */
	 border-radius: 50%;
	 /* border-color: #6F4D98; */
	}
	/* wx-单选-改变颜色checked */
	.radio-purple .wx-radio-input.wx-radio-input-checked{
		 border-color: #6F4D98;
		 background:#6F4D98!important;
	}
	.radio-blue .wx-radio-input.wx-radio-input-checked{
		 border-color: #023694;
		 background:#023694!important;
	}
	.radio-green .wx-radio-input.wx-radio-input-checked{
		 border-color: #0D6B38;
		 background:#0D6B38!important;
	}
	radio .wx-radio-input.wx-radio-input-checked::before{
		 width: 29rpx; 
		 height: 29rpx; 
		 line-height: 29rpx;
		 text-align: center;
		 border-radius: 50%;
		 font-size:24rpx; 
		 color:#fff; 
		 /* background: #6F4D98;
		 border-color: #6F4D98; */
		 transform:translate(-50%, -50%) scale(1);
		 -webkit-transform:translate(-50%, -50%) scale(1);
		}
	/* wx-单选-改变颜色checked::before*/
	.radio-purple .wx-radio-input.wx-radio-input-checked::before{
		background: #6F4D98;
		border-color: #6F4D98;
	}
	.radio-blue .wx-radio-input.wx-radio-input-checked::before{
		background: #023694;
		border-color: #023694;
	}
	.radio-green .wx-radio-input.wx-radio-input-checked::before{
		background:#0D6B38;
		border-color: #0D6B38;
	}
	/* #endif */
</style>
<style lang="scss" scoped>

//
.box{
	width: 100%;
	box-sizing: border-box;
	font-size: 30rpx;
	.content{
		padding: 0 28rpx;
	}
	.title{
		text-align: center;
		padding: 28rpx 0;
		font-size: 34rxp;
	}
	.tit-purple{
		color: #61348E;
	}
	.tit-blue{
		color: #023694;
	}
	.tit-green{
		color: #0D6B38;
	}
	.flex{
		display: flex;
	}
	.item-center{
		align-items: center;
	}
	.between{
		justify-content: space-between;
	}
	.borderbox{
			border: 2rpx solid #E6E6E6;
			border-radius: 12rpx;
			margin: 0 0 20rpx 0;
			font-size: 30rpx;
	}
	.borderbox:nth-of-type(1){
		margin-top: 20rpx;
	}
	.padding{
		padding: 15rpx 0 15rpx 24rpx;
	}
	.icon{
		margin: 0 12rpx 0 0;
		color: red;
	}
	.footer{
		width: 100%;
		padding:20rpx 68rpx;
		box-sizing: border-box;
		view{
			padding: 12rpx 48rpx;
			border-radius: 200rpx;
		}
		.view-border-purple{
			color: #6F4D98;
			border: 2rpx solid #6F4D98;
		}
		.view-border-blue{
			color: #023694;
			border: 2rpx solid #023694;
		}
		.view-border-green{
			color: #0D6B38;
			border: 2rpx solid #0D6B38;
		}
		.purple-bg{
			color: #fff;
			background: #6F4D98;
		}
		.blue-bg{
			color: #fff;
			background: #023694;
		}
		.green-bg{
			color: #fff;
			background: #0D6B38;
		}
		.grey-bg{
			color: #fff;
			background: #c0c0c0;
			border: 2rpx solid #c0c0c0;
		}
	}
}
</style>
uniapp使用uview组件的checkbox循环列表操作
DoDo_zzt21的博客
01-25 3085
uniapp使用uview组件的checkbox循环列表操作
uniapp select 多选选择器封装
weixin_53561783的博客
11-18 9042
作者想实现的功能类似一个uniapp选择器，但是可以选择多个值，同时又可以单选和全选，在uniapp 的UI框架去找，发现没有类似的，最后在uniapp 的插件市场找到了这个multiple-select 里面的功能比较全实现了单选全选并同时可以选择多个值，还可以禁用某一项数据，自己做了一下更改记录一下，希望大家以后能用到。组件封装：multiple-select.vue。注意：该插件非原创作者，如有侵权请联系作者删除。
【uni-app】深度作用选择器解决修改checkbox样式无效问题
weixin_43655896的博客
02-16 8870
uni-app表单多项选择器需要使用内置组件checkbox，具体使用见官网链接，如下： checkbox - uni-app官网 (dcloud.io) 官方给出的默认样式是这样的： ​ 现在需要修改样式为这样： ​ 于是开始修改： <checkbox-group @change="checkboxChange"> <label class="radio"> <checkbox :value="item+''"/> <
uniapp中组件库的Radio 单选框丰富的使用方法
精通前端技术，了解后端接口
01-03 9792
可以通过设置shape为square或者circle，将单选框设置为方形或者圆形此处所指的颜色，为radio选中时的背景颜色，参数为
《uni-app》表单组件-Checkbox组件
热门推荐
Oliver尹的博客
08-31 2万+
本文主要分享了uni-app中内置组件checkbox的一些用法，主要包括属性如value属性，禁用属性，选中属性等，以及checkbox提供的默认事件change的使用，最后示例了一个结合v-for指令，button组件完成了一个动态生成checkbox并获取选中值的示例demo；.........
精选资源
Uniapp 表单组件 多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本
09-21
多层选择 开关 评分 滑块 步进器 日期框 级联选择 下拉列表 复选框 单选框 多行文本 单行文本 textarea radio checkbox picker stepper input ，引用组件或者复制粘贴使用，提高工作效率。
uniapp：mosowe-table高级表格组件
mosowe
04-15 4065
演示地址 下载地址为偷懒而开发：uni-table uni-pagination mosowe-form mosowe-dropdown参考的nameConfig配置，其中col，hide，visible配置无效
Uniapp高效表单组件使用攻略：多选开关与评分系统
Uniapp 中的表单组件丰富多样，能够满足开发者在不同场景下的需求，例如实现多层选择、开关、评分、滑块、步进器、日期框、级联选择、下拉列表、复选框、单选框、多行文本和单行文本等功能。以下是对这些表单组件的...
UniApp：跨平台应用开发的全新选择
Yibaoebao的博客
05-06 1744
UniApp是一种基于Vue.js的跨平台开发框架，它允许开发者使用一套代码来构建适用于iOS、Android、H5等多种平台的应用。它采用了“Write Once, Run Anywhere”的理念，使开发者能够大幅减少开发和维护成本。
入门UniApp：从零开始构建跨平台应用
codexiaoke的博客
04-24 2437
UniApp是一个基于Vue.js框架的跨平台应用开发框架，可以让开发者使用Vue.js语法编写一次代码，然后在多个平台上运行，包括iOS、Android、Web等。UniApp的目标是实现一套代码，多端运行，从而减少开发者的工作量和时间成本。
uniapp中的单选实例（ radio）
babyxuqian的博客
11-04 1万+
radio-groupsd 单项选择器，内部由多个<radio>组成。通过把多个radio包裹在一个radio-group下，实现这些radio的单选。 属性说明 属性名 类型 默认值 说明 @change EventHandle <radio-group>中的选中项发生变化时触发 change 事件，event.detail = {value: 选中项radio的value} radio 单选项目。 属性说明 属......
uni-app单选组件radio-group与radio使用指南
最新发布
奋斗的小前端
08-20 671
本文介绍了radio-group和radio组件的功能、属性及注意事项。radio-group作为单项选择容器，包含多个radio选项实现单选功能。核心属性包括value标识、checked选中状态、disabled禁用状态等，支持自定义颜色、背景色和边框色。不同平台默认颜色不同，可通过CSS调整大小，且已选中的radio无法通过点击取消。H5和App-Vue平台（3.99+版本）支持更多样式属性。
Uniapp表单提交
m0_72189003的博客
07-09 741
【代码】Uniapp表单提交。
uniapp 手写 radio
tengyuxin的博客
11-02 479
我开发微信小程序事，写一个地址管理，要给其中一个地址设置为默认地址，使用第三方库的radio 和 input type="radio" ，都不能很好的控制选中和未选中状态，所以我决定手下radio。
Uni-App中radio按钮实现单选功能
小柠檬爱编程
12-23 5440
今天遇到了一个问题，关于uni-app实现单选功能，查询了许多百度资料，发现都是用图片代替原有位置以实现取消选中，进而成为单选按钮。下面我是这么实现的,也能解决单选问题 HTML代码: <view>微信支付</view> <label class="radio"> <radio value="1" :checked="xuanzhong==='1'" @click="radio('1')"/> </label> <view>货.
uni-app radio单选框的使用
LYBWWP
08-26 1万+
uni-app radio单选框的使用，item为循环的对象，实现的双向绑定 <u-radio-group v-model="item.SpotCheckResult" @change="radioChange" :multiple="false" > <u-radio name='合格'>合格</u-radio> <u-radio name='不合格'>不合格</u-radio>.
uni-app实现单选，多选搜索
Made In SQL
07-12 1003
选择触发方式时需权衡用户体验：实时触发更便捷，但可能增加请求频率；按钮触发更可控，但需额外操作。在实际开发中，和是常见的UI组件组合，特别适合多选场景。作为容器，可以统一管理多个的状态，并通过事件监听用户的选择变化。例如： 每个的属性用于标识选项，用户勾选或取消勾选时，会触发事件，并返回当前选中的值数组。为了高效管理用户的多选结果，建议在页面的中定义一个数组（如）来存储选中的值。在事件处理函数中，更新这个数组： 这样，始终与用户的选择同步，后续可以通过该数组进行搜索或其他操作。例如，若用户选中“
uniapp 封装弹窗组件（popup ，单选按钮，可以自选表单并提交表单）附有完整代码
lanbaiyans的博客
05-08 6293
uniapp 封装弹窗组件（popup ，单选按钮，可以自选表单并提交表单）附有完整代码
uni-app checkout（多选）radio（单选）选中之后样式不会出现钩子
路虽远行则将至，事虽难做则必成。
10-19 1280
最近在实际开发过程中发现项目的多选和单选选中之后都是只有颜色，没有钩子，或者是另外图案刚开始并不重视，猜测可能是微信基础库的bug，可能换个基础库就行了，或者是编辑器显示问题最后在查阅之后才发现，这个问题是可以解决的。是因为项目全局样式和隐藏影响到了。
ASP.NET基础实例：单选多选处理及页面数据传递
在探讨这个简单的ASP.NET例子之前，我们需要先了解ASP.NET的定义。ASP.NET是微软公司开发的一种用于构建动态Web应用程序的网络框架。它是.NET Framework的一部分，允许开发者使用.NET编程语言创建Web页面和Web服务。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值