单选多选提交问卷，代码示例

ｅｌｅｍｅｎｔ中

需要对接口返回的数据进行分析。多选问题使用checkbox，单选题使用radio。

多选时可以绑定ｍｉｎ／ｍａｘ来控制选择的个数

        <div class="" v-if="item2.allowMultipleVote == 1"><div class="title_radio">多选 [最少选择<span>{{ item2.leastSelectNumber }}</span>项,最多选择<span>{{ item2.maxSelectNumber }}</span>项]</div><div class="choose_card"><el-checkbox-groupv-model="selectedCheckboxItems":min="Number(item2.leastSelectNumber)":max="Number(item2.maxSelectNumber)"><label v-for="(item3, index3) in item2.options" :key="index3"><el-checkbox:label="item3.id":value="item3.id"@change="handleCheckboxChange(item2.itemId)">{{ item3.dataOption }}</el-checkbox></label></el-checkbox-group></div></div><div class="" v-else><div class="title_radio">单选</div><div class="choose_card"><el-radio-group v-model="selectedRadioItems"><label v-for="(item3, index3) in item2.options" :key="index3"><el-radio:label="item3.id":value="item3.id"@change="handleRadioChange(item2.itemId)">{{ item3.dataOption }}</el-radio></label></el-radio-group></div></div>

怎么收集选中的数据集合

因为是设计多选、单选、多个问题。所以要使用多维数组传给后端。

分别给多选和单选绑定方法，收集选中的值。

ｉｔｅｍ是选中题目的ｉｄ，itemOptionIds是题目的选项ｉｄ，多选时itemOptionIds要穿数组。所以多选题v-model绑定的值是数组。

    // 单选按钮的操作handleRadioChange(value) {let newObj = {itemId: value,itemOptionIds: this.selectedRadioItems,};// 判断是否已经选择过当前选项let index = this.sumitInfoid.findIndex((item) => item.itemId === newObj.itemId);if (index !== -1) {this.sumitInfoid[index] = newObj;} else {this.sumitInfoid.push(newObj);}// console.log('单选按钮', this.sumitInfoid);},// 多选按钮的操作handleCheckboxChange(value) {console.log(value, this.selectedCheckboxItems, 'this.selectedCheckboxItems');let newObj = {itemId: value,itemOptionIds: this.selectedCheckboxItems,};let index = this.sumitInfoid.findIndex((item) => item.itemId === newObj.itemId);if (index !== -1) {this.sumitInfoid[index] = newObj;} else {this.sumitInfoid.push(newObj);}console.log('多选按钮', this.sumitInfoid);},

ｄａｔａ定义的值

      sumitInfoid: [], // 最终要提交的选项数据selectedRadioItems: '', // 单选的选项数据selectedCheckboxItems: [], // 多选的选项数据

 ｕｎｉ中

ｕｎｉ中好像监听不到多选的最大值最小值，需要自己判断。其他地方同element

				<view class="" v-if="item2.allowMultipleVote == 1"><view class="title_radio">多选 [最少选择<text>{{item2.leastSelectNumber}}</text>项,最多选择<text>{{item2.maxSelectNumber}}</text>项]</view><view class="choose_card"><checkbox-group @change="checkboxChange"><label v-for="(item3,index3) in item2.options" :key="index3"><checkbox :value="item2.itemId+'+'+item3.id" :checked="item3.isChecked != 0"style="transform:scale(0.8)" color="#00B893;" /><text>{{item3.dataOption}}</text></label></checkbox-group></view></view><view class="" v-else><view class="title_radio">单选</view><view class="choose_card"><radio-group @change="radioChange"><label v-for="(item3,index3) in item2.options" :key="index3"><!-- 单选按钮 --><radio class="radio_true" :value="item2.itemId+'+'+item3.id" :name="item3.dataOption":checked="index3 === current" color="#00B893" style="transform: scale(0.8);" /><text>{{item3.dataOption}}</text></label></radio-group></view></view>

			// 投票选项更改radioChange: function(evt) {console.log(evt.detail.value);let value = evt.detail.value.split('+');let newObj = {itemId: value[0],itemOptionIds: [value[1]] // 注意这里将itemOptionIds包装在数组中};// 判断是否已经选择过当前选项let index = this.sumitInfoid.findIndex(item => item.itemId === newObj.itemId);console.log('index !== -1', index !== -1); // 输出结果if (index !== -1) {this.sumitInfoid[index] = newObj;} else {this.sumitInfoid.push(newObj);}// console.log('输出结果单选sumitInfoid', this.sumitInfoid); // 输出结果},// 投票选项更改checkboxChange: function(e) {let newObj = {itemId: '',itemOptionIds: [] // 注意这里将itemOptionIds包装在数组中};if (e.detail.value.length > 0) {let firstValue = e.detail.value[0];let parts = firstValue.split('+');newObj.itemId = parts[0]; // 获取id部分    // 遍历所有值并提取value部分  e.detail.value.forEach(value => {let parts = value.split('+');if (parts.length > 1) { // 确保有id和value两部分// 判断是否多选了let foundItem = this.voteItemList.find(item => item.itemId === newObj.itemId)let maxSelectNumber = foundItem.maxSelectNumber;if (newObj.itemOptionIds.length >= maxSelectNumber) {uni.showToast({title: '最多只能选择' + maxSelectNumber + '项',icon: 'none'})for (var i = 0, lenI = foundItem.options.length; i < lenI; ++i) {const item = foundItem.options[i];if (item.id == parts[1]) {this.$set(item, 'isChecked', 1)setTimeout(() => {this.$set(item, 'isChecked', 0)}, 500)}}} else {newObj.itemOptionIds.push(parts[1]); // 将value部分添加到values数组中  }}});}// 判断是否已经选择过当前选项let index = this.sumitInfoid.findIndex(item => item.itemId === newObj.itemId);if (index !== -1) {this.sumitInfoid[index] = newObj;} else {this.sumitInfoid.push(newObj);}// }// }// console.log('输出结果多选sumitInfoid', this.sumitInfoid); // 输出结果},

 页面展示