（已解决）微信小程序调查问卷所有题放在一个页面上

最近做一个调查问卷的小程序改需求时遇到了一个问题：

要将所有单选题放在一个页面上，我用了双层循环嵌套将每道题的下标以及每个题对应的选项下标循环出来

但是每个单选的radioChange绑定事件都是同一个函数，造成了如果用户想更改选项那么后台js记录的当前checked的选项不是更改后的选项，而是更改前的选项并且还造成了一道题变成多选的结果

（将所有单选题放在一个页面上）

（radioChange事件控制台输出选择的选项）

解决思路：

wxml拿到每道题的下标，再拿到每道题对应的选项的下标
radioChange函数用foreach遍历当前题目的选项ABCD的item.checked是否有true，若有true证明之前这道题已经选过
创建一个变量chongfu，用if语句判断如果foreach遍历结果中有true，则赋值给chongfu=true
判断chongfu是否为true，再用ifelse语句，若为true，则先pop（）之前的选项，再push（）更改后的选项装进数组，若为false则直接将选项装进最后提交的答案数组

前端wxml代码：

 <scroll-view scroll-y='true' class="container-scroll" enable-flex='true' wx:for='{{currentQuesiton}}' wx:item='item' wx:key="index" wx:for-index="childindex"><view class="container"><!-- 标题 --><view class=" title">{{item.questionNo}}、{{item.questionContent}}</view><!-- 选项 --><view class="answer-box"><radio-group bindchange="radioChange" data-index="{{childindex}}"><label wx:for="{{item.scaleOptions}}" wx:item='item' data-index="{{childindex}}" wx:key="unique" class="item"><view><radio value="{{item.option}}" checked="{{item.checked}}" /></view><view class="">{{item.optionContent}}</view></label></radio-group></view></view></scroll-view>

js代码

  /*** 改变选项 和 记录选项*/radioChange(e) {console.log('radio发生change事件，携带value值为：', e.detail.value)var index = e.currentTarget.dataset.index;const options = this.data.currentQuesiton[index].scaleOptions;//多选bug(已解决)var chongfu = false;  //一道题只能选一个options.forEach((ele, i) => {if(options[i].checked === true){chongfu = true;}})if(chongfu === true){this.data.currentAnswer = e.detail.value;this.data.answers.pop();this.data.answers.push(String(this.data.currentAnswer));}else{this.data.currentAnswer = e.detail.value;this.data.answers.push(String(this.data.currentAnswer));}options.forEach((ele, i) => {options[i].checked = false;options[e.detail.value - 1].checked = true;})},

（已解决）微信小程序调查问卷所有题放在一个页面上相关推荐

微信小程序调查问卷案例
微信小程序调查问卷案例通过开发一个"调查问卷"的案例来掌握常用表单组件的使用,以及如何收集用户填写的表单信息提交给服务器和从服务器获取数据后显示在表单中.参考界面如图1所示. 步 ...
[已解决]微信小程序 canvas 文字样式错乱问题
在微信小程序中使用canvas绘制海报的时候,发现有多种不同的样式文字时, 保存canvas内容为图片,出现各种文字样式错乱. ------------------------------------ ...
微信小程序使用页面栈修改上一个页面的data数据
微信小程序中从一个页面A进入一个页面B,如果页面B的数据有改变,再返回页面A的时候需要把数据同步到页面A. 一般的方法有: 1. 使用本地缓存 wx.setStorage() 和 wx.getStor ...
解决微信小程序银行卡号输入转换格式
解决微信小程序银行卡号输入转换格式问题 ps:2017-02-17 19:44 (发现新bug,暂已解决优化中) 新手第一次写博客,请多多见谅! (感觉会有更好的办法,希望有大牛能对我指点指点) 输入 ...
微信小程序java中文乱码_如何解决微信小程序显示中文无法上传或者出现乱码的问题？...
今天小编给大家讲解如何解决微信小程序显示中文无法上传或者出现乱码的问题?有需要或者有兴趣的朋友们可以看一看下文,相信对大家会有所帮助的. 在formData中对文字进行编码,使用encodeURI() ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局，为啥到真机就是乱的
解决微信小程序使用wxcharts在屏幕不固定问题-开发工具里也显示好了布局,为啥到真机就是乱的 .chart{ width: 100%; text-align: center; } .canvas{ ...
解决微信小程序配置https不成功问题
解决微信小程序配置https不成功问题参考文章: (1)解决微信小程序配置https不成功问题 (2)https://www.cnblogs.com/ant-jmf17/p/8056989.html ...
解决微信小程序textarea层级太高遮挡其他组件的问题
解决微信小程序textarea层级太高遮挡其他组件的问题参考文章: (1)解决微信小程序textarea层级太高遮挡其他组件的问题 (2)https://www.cnblogs.com/pansid ...

（已解决）微信小程序调查问卷所有题放在一个页面上

要将所有单选题放在一个页面上，我用了双层循环嵌套将每道题的下标以及每个题对应的选项下标循环出来

但是每个单选的radioChange绑定事件都是同一个函数，造成了如果用户想更改选项那么后台js记录的当前checked的选项不是更改后的选项，而是更改前的选项并且还造成了一道题变成多选的结果

解决思路：

前端wxml代码：

js代码

（已解决）微信小程序调查问卷所有题放在一个页面上相关推荐

最新文章

热门文章