前端实现问卷调查
1 <div class="swiper-container swiper-no-swiping"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide"> 4 <p>1.您的年龄？</p> 5 <ul class="list"> 6 <li class="swiper-button"> 7 <div class="mui-input-row mui-checkbox mui-left"> 8 <label style="padding-left: 40px">A.60岁以上</label> 9 <input id="input" name="checkbox1" value="2" type="checkbox" style="left: 0"> 10 </div> 11 </li> 12 <li class="swiper-button"> 13 <div class="mui-input-row mui-checkbox mui-left"> 14 <label style="padding-left: 40px">B.50岁至60岁</label> 15 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 16 </div> 17 </li> 18 <li class="swiper-button"> 19 <div class="mui-input-row mui-checkbox mui-left"> 20 <label style="padding-left: 40px">C.40岁至50岁</label> 21 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 22 </div> 23 </li> 24 <li class="swiper-button"> 25 <div class="mui-input-row mui-checkbox mui-left"> 26 <label style="padding-left: 40px">D.30岁至40岁</label> 27 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 28 </div> 29 </li> 30 <li class="swiper-button"> 31 <div class="mui-input-row mui-checkbox mui-left"> 32 <label style="padding-left: 40px">E.30岁以下</label> 33 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 34 </div> 35 </li> 36 </ul> 37 </div> 38 <div class="swiper-slide"> 39 <p>2．您目前的家庭年收入？</p> 40 <ul class="list"> 41 <li class="swiper-button"> 42 <div class="mui-input-row mui-checkbox mui-left"> 43 <label style="padding-left: 40px">A.5万元以下</label> 44 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 45 </div> 46 </li> 47 <li class="swiper-button"> 48 <div class="mui-input-row mui-checkbox mui-left"> 49 <label style="padding-left: 40px">B.5万至20万元</label> 50 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 51 </div> 52 </li> 53 <li class="swiper-button"> 54 <div class="mui-input-row mui-checkbox mui-left"> 55 <label style="padding-left: 40px">C.20万至50万元</label> 56 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 57 </div> 58 </li> 59 <li class="swiper-button"> 60 <div class="mui-input-row mui-checkbox mui-left"> 61 <label style="padding-left: 40px">D.50万至100万元</label> 62 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 63 </div> 64 </li> 65 <li class="swiper-button"> 66 <div class="mui-input-row mui-checkbox mui-left"> 67 <label style="padding-left: 40px">E.100万元以上</label> 68 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 69 </div> 70 </li> 71 </ul> 72 </div> 73 <div class="swiper-slide"> 74 <p>3．您目前的个人及家庭财务状况？</p> 75 <ul class="list"> 76 <li class="swiper-button"> 77 <div class="mui-input-row mui-checkbox mui-left"> 78 <label style="padding-left: 40px">A.有未到期的贷款或借款</label> 79 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 80 </div> 81 </li> 82 <li class="swiper-button"> 83 <div class="mui-input-row mui-checkbox mui-left"> 84 <label style="padding-left: 40px">B.收入与支出相抵</label> 85 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 86 </div> 87 </li> 88 <li class="swiper-button"> 89 <div class="mui-input-row mui-checkbox mui-left"> 90 <label style="padding-left: 40px">C.有一定的积蓄</label> 91 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 92 </div> 93 </li> 94 <li class="swiper-button"> 95 <div class="mui-input-row mui-checkbox mui-left"> 96 <label style="padding-left: 40px">D.有较为丰厚的积蓄并有一定的投资</label> 97 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 98 </div> 99 </li> 100 <li class="swiper-button"> 101 <div class="mui-input-row mui-checkbox mui-left"> 102 <label style="padding-left: 40px">E.比较富裕并有相当的投资</label> 103 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 104 </div> 105 </li> 106 </ul> 107 </div> 108 <div class="swiper-slide"> 109 <p>4．您的投资经验（P2P/股票/债券/基金/私募产品）？</p> 110 <ul class="list"> 111 <li class="swiper-button"> 112 <div class="mui-input-row mui-checkbox mui-left"> 113 <label style="padding-left: 40px">A.没有任何投资经验</label> 114 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 115 </div> 116 </li> 117 <li class="swiper-button"> 118 <div class="mui-input-row mui-checkbox mui-left"> 119 <label style="padding-left: 40px">B.投资过国债/货币/保本/债券类基金</label> 120 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 121 </div> 122 </li> 123 <li class="swiper-button"> 124 <div class="mui-input-row mui-checkbox mui-left"> 125 <label style="padding-left: 40px">C.1年以内权益类投资经验</label> 126 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 127 </div> 128 </li> 129 <li class="swiper-button"> 130 <div class="mui-input-row mui-checkbox mui-left"> 131 <label style="padding-left: 40px">D.1年至3年权益类投资经验</label> 132 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 133 </div> 134 </li> 135 <li class="swiper-button"> 136 <div class="mui-input-row mui-checkbox mui-left"> 137 <label style="padding-left: 40px">E.3年以上权益类投资经验</label> 138 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 139 </div> 140 </li> 141 </ul> 142 </div> 143 <div class="swiper-slide"> 144 <p>5．您目前是否持有以下投资产品？</p> 145 <ul class="list"> 146 <li class="swiper-button"> 147 <div class="mui-input-row mui-checkbox mui-left"> 148 <label style="padding-left: 40px">A.没有任何投资经验</label> 149 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 150 </div> 151 </li> 152 <li class="swiper-button"> 153 <div class="mui-input-row mui-checkbox mui-left"> 154 <label style="padding-left: 40px">B.全部为储蓄存款（包含短期银行理财产品）</label> 155 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 156 </div> 157 </li> 158 <li class="swiper-button"> 159 <div class="mui-input-row mui-checkbox mui-left"> 160 <label style="padding-left: 40px">C.存款及固定收益类产品（P2P/国债/货币/债券基金等）</label> 161 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 162 </div> 163 </li> 164 <li class="swiper-button"> 165 <div class="mui-input-row mui-checkbox mui-left"> 166 <label style="padding-left: 40px">D.主要为权益类投资产品，少量储蓄存款</label> 167 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 168 </div> 169 </li> 170 <li class="swiper-button"> 171 <div class="mui-input-row mui-checkbox mui-left"> 172 <label style="padding-left: 40px">E.全部为权益类投资产品</label> 173 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 174 </div> 175 </li> 176 </ul> 177 </div> 178 <div class="swiper-slide"> 179 <p>6．您目前已经或者准备投资的金额占您个人或家庭所拥有总资产的比重？（备注：总资产包括存款、证券投资、房地产及实业等）</p> 180 <ul class="list"> 181 <li class="swiper-button"> 182 <div class="mui-input-row mui-checkbox mui-left"> 183 <label style="padding-left: 40px">A.80%至100%</label> 184 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 185 </div> 186 </li> 187 <li class="swiper-button"> 188 <div class="mui-input-row mui-checkbox mui-left"> 189 <label style="padding-left: 40px">B.50%至80%</label> 190 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 191 </div> 192 </li> 193 <li class="swiper-button"> 194 <div class="mui-input-row mui-checkbox mui-left"> 195 <label style="padding-left: 40px">C.20%至50%</label> 196 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 197 </div> 198 </li> 199 <li class="swiper-button"> 200 <div class="mui-input-row mui-checkbox mui-left"> 201 <label style="padding-left: 40px">D.10%至20%</label> 202 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 203 </div> 204 </li> 205 <li class="swiper-button"> 206 <div class="mui-input-row mui-checkbox mui-left"> 207 <label style="padding-left: 40px">E.0至10%</label> 208 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 209 </div> 210 </li> 211 </ul> 212 </div> 213 <div class="swiper-slide"> 214 <p>7．您计划投资的期限？</p> 215 <ul class="list"> 216 <li class="swiper-button"> 217 <div class="mui-input-row mui-checkbox mui-left"> 218 <label style="padding-left: 40px">A.1年以内</label> 219 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 220 </div> 221 </li> 222 <li class="swiper-button"> 223 <div class="mui-input-row mui-checkbox mui-left"> 224 <label style="padding-left: 40px">B.1年至3年</label> 225 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 226 </div> 227 </li> 228 <li class="swiper-button"> 229 <div class="mui-input-row mui-checkbox mui-left"> 230 <label style="padding-left: 40px">C.3年至5年</label> 231 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 232 </div> 233 </li> 234 <li class="swiper-button"> 235 <div class="mui-input-row mui-checkbox mui-left"> 236 <label style="padding-left: 40px">D.5年至10年</label> 237 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 238 </div> 239 </li> 240 <li class="swiper-button"> 241 <div class="mui-input-row mui-checkbox mui-left"> 242 <label style="padding-left: 40px">E.10年以上</label> 243 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 244 </div> 245 </li> 246 </ul> 247 </div> 248 <div class="swiper-slide"> 249 <p>8．您希望获得的年化投资收益率？</p> 250 <ul class="list"> 251 <li class="swiper-button"> 252 <div class="mui-input-row mui-checkbox mui-left"> 253 <label style="padding-left: 40px">A.略高于一年期定期储蓄利率</label> 254 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 255 </div> 256 </li> 257 <li class="swiper-button"> 258 <div class="mui-input-row mui-checkbox mui-left"> 259 <label style="padding-left: 40px">B.相当于通货膨胀率</label> 260 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 261 </div> 262 </li> 263 <li class="swiper-button"> 264 <div class="mui-input-row mui-checkbox mui-left"> 265 <label style="padding-left: 40px">C.高于通货膨胀率，略有3%至5%的增值空间</label> 266 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 267 </div> 268 </li> 269 <li class="swiper-button"> 270 <div class="mui-input-row mui-checkbox mui-left"> 271 <label style="padding-left: 40px">D.接近或相当于股票市场平均收益率</label> 272 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 273 </div> 274 </li> 275 <li class="swiper-button"> 276 <div class="mui-input-row mui-checkbox mui-left"> 277 <label style="padding-left: 40px">E.明显超过股票市场平均收益率</label> 278 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 279 </div> 280 </li> 281 </ul> 282 </div> 283 <div class="swiper-slide"> 284 <p>9．如果您的投资暂时亏损了25%，您会如何操作？</p> 285 <ul class="list"> 286 <li class="swiper-button"> 287 <div class="mui-input-row mui-checkbox mui-left"> 288 <label style="padding-left: 40px">A.无法承担风险，准备赎回</label> 289 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 290 </div> 291 </li> 292 <li class="swiper-button"> 293 <div class="mui-input-row mui-checkbox mui-left"> 294 <label style="padding-left: 40px">B.3至6个月内如果还是亏损25%，准备赎回</label> 295 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 296 </div> 297 </li> 298 <li class="swiper-button"> 299 <div class="mui-input-row mui-checkbox mui-left"> 300 <label style="padding-left: 40px">C.1年之内还是亏损25%，准备赎回</label> 301 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 302 </div> 303 </li> 304 <li class="swiper-button"> 305 <div class="mui-input-row mui-checkbox mui-left"> 306 <label style="padding-left: 40px">D.2至3年内都可以持有，等待机会</label> 307 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 308 </div> 309 </li> 310 <li class="swiper-button"> 311 <div class="mui-input-row mui-checkbox mui-left"> 312 <label style="padding-left: 40px">E.长期持有，等待机会</label> 313 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 314 </div> 315 </li> 316 </ul> 317 </div> 318 <div class="swiper-slide"> 319 <p>10．家人或朋友对您投资风险偏好的评价？</p> 320 <ul class="list"> 321 <li class="swiper-button"> 322 <div class="mui-input-row mui-checkbox mui-left"> 323 <label style="padding-left: 40px">A.无法承担风险回</label> 324 <input name="checkbox1" value="2" type="checkbox" style="left: 0"> 325 </div> 326 </li> 327 <li class="swiper-button"> 328 <div class="mui-input-row mui-checkbox mui-left"> 329 <label style="padding-left: 40px">B.虽然厌恶风险，但愿意承担一些风险</label> 330 <input name="checkbox1" value="4" type="checkbox" style="left: 0"> 331 </div> 332 </li> 333 <li class="swiper-button"> 334 <div class="mui-input-row mui-checkbox mui-left"> 335 <label style="padding-left: 40px">C.在深思熟虑后，愿意承担一定的风险</label> 336 <input name="checkbox1" value="6" type="checkbox" style="left: 0"> 337 </div> 338 </li> 339 <li class="swiper-button"> 340 <div class="mui-input-row mui-checkbox mui-left"> 341 <label style="padding-left: 40px">D.敢冒风险，比较激进</label> 342 <input name="checkbox1" value="8" type="checkbox" style="left: 0"> 343 </div> 344 </li> 345 <li class="swiper-button"> 346 <div class="mui-input-row mui-checkbox mui-left"> 347 <label style="padding-left: 40px">E.爱好风险，相当激进</label> 348 <input name="checkbox1" value="10" type="checkbox" style="left: 0"> 349 </div> 350 </li> 351 </ul> 352 </div> 353 <div class="swiper-slide"> 354 <p>您的风险评测类型结果为：</p> 355 <div class="genre"> 356 <p class="result" id="result"></p> 357 <img src="/images/app/base/baoshou_anzhuo.png" id="imgs"/> 358 </div> 359 <p class="tips">建议您的出借额度为<span id="howMuch"></span>，<span id="allProject"></span></p> 360 <button class="goBtn" id="comfirm">前往投标</button> 361 <a class="againBtn" href="/app/riskTestInit.do?userId=${userId}&uKey=${uKey}">重新评测</a> 362 </div> 363 </div> 364 </div>
View Code
1 $(function () { 2 var userId = "${userId}", 3 length = $(\'.swiper-slide\').length, 4 $result = $(\'#result\'), 5 $imgs = $(\'#imgs\'), 6 $howMuch = $(\'#howMuch\'), 7 score = null, arrayNo = null; 8 9 // 定义输出文件array 10 var array = [ 11 { 12 result: \'保守型\', 13 coverUrl: \'/images/app/base/baoshou_anzhuo.png\', 14 money: \'50万\' 15 }, 16 { 17 result: \'稳健型\', 18 coverUrl: \'/images/app/base/wenjian_anzhuo.png\', 19 money: \'300万\' 20 }, 21 { 22 result: \'积极型\', 23 coverUrl: \'/images/app/base/jiji_anzhuo.png\', 24 money: \'您的出借额度不受限制\' 25 }, 26 ]; 27 28 // 输出文件 29 var resultData = function ($result, $imgs, $howMuch, num) { 30 var data = array[num]; 31 // console.log(data); 32 $result.text(data.result); 33 $imgs.attr(\'src\',data.coverUrl); 34 $howMuch.text(data.money); 35 } 36 37 // ajax函数 38 var resultAjax = function (score, userId) { 39 $.ajax({ 40 url:"/userCenter/riskTest/saveRiskTest.json", 41 async:true, 42 data:{"riskPreferenceCore":score,"userId":userId}, 43 success:function(data){ 44 var code = data.code; 45 if(code == 1){ 46 console.log("success"); 47 }else{ 48 alert("保存失败,请稍后再试"); 49 } 50 } 51 }); 52 } 53 54 // dom事件 55 $(\'.swiper-slide\').each(function(i, val) { 56 var self = $(this); 57 self.find(\'.list\').find(\'li\').click(function(){ 58 if($(this).addClass(\'current\')){ 59 $(this).find(\'input:checkbox\').prop(\'checked\', true); 60 } 61 score += parseInt($(this).find(\'input:checkbox\').val()); 62 console.log(score); 63 if(self.index() == 9) { 64 if (score >= 20 && score <= 40) { 65 arrayNo = 0; 66 } else if (score > 40 && score <= 60) { 67 arrayNo = 1; 68 } else if (score > 60 && score <= 100) { 69 arrayNo = 2; 70 } 71 console.log(arrayNo); 72 73 // 输出结果文件 74 resultData($result, $imgs, $howMuch, arrayNo); 75 76 // ajax接口请求 77 resultAjax(score, userId); 78 } 79 }) 80 }); 81 82 $(\'#comfirm\').click(function () { 83 $(location).prop(\'href\', \'/cheDaiIndex.do\'); 84 }); 85 86 // 切换造轮子 87 var mySwiper = new Swiper (\'.swiper-container\', { 88 navigation: { 89 nextEl: \'.swiper-button\', 90 lazyLoading : true, 91 lazyLoadingInPrevNext : true, 92 autoplay: 3000, 93 speed: 3000 94 }, 95 }); 96 97 });
View Code
版权声明：本文为DreamLiFeng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。