uniapp使用checkbox-group实现多选题并实现互斥

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

HTML的代码

<view class="act-view-type">
			<view class="act-view-title"><text v-text="index + '.' + json.question_text"></text></view>
			<view class="act-view-answer">
				<checkbox-group  >
					<label class="act-view-radio" v-for="(item1, index1) in json.items" :key="index1">
						<view class="act-view-radio-left">
							<checkbox class="checkBox" @click="getIndex(json.items, index1, json.items.length)" 
							  :checked="(item1.opt === 1)" /></view>
						<view>{{ item1.answer_text }}</view>
					</label>
				</checkbox-group>
			</view>
		</view>

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代码

<style>
.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;
}
</style>

注意一定要阻止冒泡事件，我在.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 < length - 1; i++) {
                items[i].opt = 0
                this.state[i] = false
            }
        }
    } else {
        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
    }
},