Vue3：一页多题答案提示及循环radio和checkbox混合使用

一页多题，类型包括单选（单选、判断）和多选，radio和checkbox混合使用，答案检验数据匹配，正确答案格式化，答案提交数据格式化，数据提交。

效果：

数据获取：

数据提交：

HTML：

JS：

CSS:

.question li{background:#fff;padding:30px 20px 20px 20px;border-radius:10px;box-shadow:0 0 7px #ccc;border:1px solid #eaeaea;margin-bottom:40px;position:relative;}
.question li h6{position:absolute;right:20px;top:30px;}
.question li h6 b.daanErr{color:#e60000;}
.question li h6 b{color:#018407;}
.question li h5{border-left:4px solid #ff6e52;font-size:20px;font-weight:bold;padding-left:15px;margin-bottom:20px;}
.question li dt{padding:0 0 20px 20px;}
.question li dd{padding-right:50px;}
.question li label{display:line-block;position:relative;margin:0 20px 20px 0;padding-left:20px;}
.question li label span{border:1px solid #d0d0d0;border-radius:10px;padding:7px 20px;box-sizing:border-box;display:inline-block;line-height:26px;}
.question li label input{display:none;}
.question li label input:checked+span{background:#fffafa;z-index:2;color:#b80000;border:1px solid #b80000;border-radius:10px;}
.question li label span b{display:inline-block;font-weight:normal;margin-right:5px;}


.checkEnterBt{display:flex;justify-content:space-around;align-items:center;}
.checkEnterBt button{width:40%;background:#e60000;color:#fff;border:none;padding:20px 0;border-radius:10px;}
.checkEnterBt button:nth-child(2){background:#007ce6;}

解释：

数据里的答案为：A_B_C_D

需要校正展示的答案为：ABCD

提交数据的答案为：题目id-A_B_C_D

通过 :value="list.id+'_'+radio.name"  和  :value="list.id+'_'+checkbox.name" 将选中数据统一为题目id_选项

展开运算符（用于展开可迭代对象（如数组、字符串等）为独立的元素，或者用于将多个元素合并为一个数组或对象）+Object.values()（返回一个给定对象自己的所有可枚举属性值的数组）将单选和多选数据选择数据合并到一个数组中，将原数据['题目id_选项值','题目id_选项值']格式化成[题目id,选项值],[题目id,选项值]

let newSelect = [] //单选+多选
newSelect = Object.values({...checkData.value,...radioData.value})
//格式化单选多选合并后的数据为[id,选项] 单选[id,A],多选[id,A],[id,C]
for(let y=0;y

查找格式化数据中相同id的数据，比较格式化后的正确答案，比较正确，组合成提交答案要求的格式和校正展示的格式。