uniapp小程序测试问答实现单复选样式改变以及选项存储

秒速五厘米 2023-06-21 10:28 10阅读 0赞

# 如何用css结合js来实现一个单复选按钮点击改变样式的功能,以及选中选项的存储 #

在项目中我们经常会遇到一些需要单复选的需求，例如用户满意度调查，用户测试问答等功能，但是uniapp现有的插件样式又满足不了我们的需求，这时，我们就要来封装一个满足现有需求的插件，或者如果此功能复用率不高的话，我们可以直接在页面中利用css和js来实现。  
上图：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1anlvbmc_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1anlvbmc_size_16_color_FFFFFF_t_70 1]

## 大家让一下，我要开始表演了 ##

**第一步：** 我们先在循环出来的选项中添加一个赋值为布尔值得变量（如果是自己定义的选项更简单，直接再给选项添加一个布尔值的属性），上代码：

// this.problem.content.forEach是所有选项，用循环给他们添加一个布尔值得属性
    this.problem.content.forEach(item => { 
    	item.isSelect = false
    })

**第二步：** 在选项的html结构中绑定动态类名，并添加点击事件 上代码：

// v-if="problem.option_type == 1" 判断当前问题是单选还是复选，是单选就触发 changeSelect 事件，反之则触发multiSelectChange
    <block  v-for="(item, index) in problem.content" :key="index">
    	<view :class="item.isSelect ? 'answer_list_yes' : 'answer_list_no'" @click="changeSelect(item)"  v-if="problem.option_type == 1">{ { item.words}}</view>
    	<view :class="item.isSelect ? 'answer_list_yes' : 'answer_list_no'" @click="multiSelectChange(item)" v-else>{ { item.words}}</view>
    </block>

\*\*第三步：\*\*在data中注册我们需要的数据

data() { 
    		return { 
    			activeId: []  // 用来存储当前题目选中的选项
    			keepList: { } // 用来存储所有题目选项
    		}
    	},

**第四步：** 注册点击事件  
单选（changeSelect）：

async changeSelect(item) { 
    			// 单选, 替换原来选中id item.id为当前选项id
    			if (this.activeId.indexOf(item.id) < 0) { 
    				this.activeId = [item.id]
    				// 存储答案
    				this.keepList[item.id] = this.activeId
    			}
    			// 遍历改变当前选项的isSelect 
    			this.problem.content.map(item => { 
    				if (item.id === this.activeId[0]) { 
    					item.isSelect = true
    				} else { 
    					item.isSelect = false
    				}
    			})
    		},

复选（multiSelectChange）：

async multiSelectChange(item) { 
    			// 多选, 没有就添加，有就删除
    			const num = this.activeId.indexOf(item.id)
    			if (num < 0) { 
    				this.activeId.push(item.id)
    			} else { 
    				this.activeId.splice(num, 1)
    			}
    			this.keepList[item.id] = this.activeId
    			this.problem.content.map(item => { 
    				item.isSelect = false
    				this.activeId.map(itemId => { 
    					if (item.id === itemId) { 
    						item.isSelect = true
    					}
    				})
    			})
    		},

**然后就可以自定义选项是否选中的样式啦：**

.answer_list_yes { 
    	width: 433rpx;
    	margin-bottom: 24rpx; 
    	padding: 17rpx 52rpx 21rpx;
    	color: #fff;
    	background: #83C3FF;
    	font-size: 28rpx;
    	line-height: 36rpx;
    	border-radius: 10rpx;
    }

.answer_list_no { 
    	width: 433rpx;
    	margin-bottom: 24rpx; 
    	padding: 17rpx 52rpx 21rpx;
    	border: 1rpx solid #EEE;
    	color: #333;
    	font-size: 28rpx;
    	line-height: 36rpx;
    	border-radius: 10rpx;
    }

**keepList就存储着我们选中的选项id示例：**

keepList: { 
    	1: [1,2,3]
    }

当然，js是不可以用数字作为属性名的，这只是一个示例，我们可以将 this.keepList\[item.id\] = this.activeId 中的item.id改为选项中其他为字符串属性

### ok,表演结束（-\_-） ###

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1anlvbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191212151051260.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1anlvbmc=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1anlvbmc_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191212151214496.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R1anlvbmc=,size_16,color_FFFFFF,t_70