uniapp使用checkbox

2023-09-11 04:14| 来源: 网络整理| 查看: 265

在这里插入图片描述上图就是实现互斥的一个过程，前6道题和最后一道题互斥。也就是说，如果先选择了前面六道题，后面又选择了最后一道，前面的题目就会自动置空，反之，如果先选了最后一道题，然后再去选择前六道的任意一道题，最后一道题都会置空。

HTML的代码 {{ item1.answer_text }} json 格式 { "question_text": "睡前4小时内有: (多选)", "question_seq": 7, "items": [{ "answer_text": "摄入咖啡、茶、提神饮料、辛辣油腻饮食", "opt": 0, "answer_type": 1, "answer_seq": 0 }, { "answer_text": "剧烈运动", "opt": 0, "answer_type": 1, "answer_seq": 1 }, { "answer_text": "放松训练", "opt": 0, "answer_type": 1, "answer_seq": 2 },{ "answer_text": "饮酒", "opt": 0, "answer_type": 1, "answer_seq": 3 },{ "answer_text": "吸烟", "opt": 0, "answer_type": 1, "answer_seq": 4 },{ "answer_text": "在床上玩手机、看书、看视频、工作等", "opt": 0, "answer_type": 1, "answer_seq": 5 },{ "answer_text": "没有上述行为", "opt": 0, "answer_type": 1, "answer_seq": 6 }, ] }, css代码 .act-view-type { width: 685rpx; position: relative; } .act-view-answer { pointer-events: none; color: #868582; line-height: 53rpx; } .act-view-radio-left { width: 50rpx; } .checkBox{ pointer-events: visible; } .act-view-radio { margin: 0 20rpx; display: block; } .act-view-radio view { display: table-cell; align-items: center; }

注意一定要阻止冒泡事件，我在.act-view-answer类里加了pointer-events: none;，然后又在.checkBox取消阻止冒泡 pointer-events: visible; 不然用户手误点到正方形外部也会改变checkBox的样式，导致互斥事件的样式没有发生改变。

最后是js的代码全局变量state用来存每道题的选择情况：是否有选择 state:[false,false,false,false,false,false,false]，数组的大小由题目的选择数量决定

getIndex(items, index, length) { this.state[index] = !this.state[index] if (this.state[index]) { if (index != (length - 1)) { this.state[index] = true this.state[length - 1] = false items[index].opt = 1 items[length - 1].opt = 0 } else { items[index].opt = 1 for (let i = 0; i items[index].opt = 0 } },

如果不想要互斥事件的多选题，只需要改js

getIndex(items, index, length) { this.state[index] = !this.state[index] if (this.state[index]) { items[index].opt = 1 } else { items[index].opt = 0 } },

【本文地址】

公司简介

联系我们