I plan to do an online pure front-end questionnaire. There are ten questions in total. Choosing A will get one point, choosing B will get two points, choosing C will get three points, and choosing D will get four points. Then the results will pop up directly at the end. The problem I am currently encountering is that after a user chooses A in the first question, if he later changes his answer to B, his score will not be deducted by one point and then re-added by two points. What method can be used? solve this problem? Thanks
<body>
<!-- 第一页 -->
<section class="page1">
<p class="swipers logo">
<p class="welcome">
<h3>主标题</h3>
<p>副标题</p>
</p>
<a href="#" class="start">开始测试</a>
</p>
</section>
<!-- 第二页 -->
<section class="page2">
<header class="head">
<p class="swiper-pagination swiper-pagination-bullets pagination">
</p>
</header>
<p class="swipers">
<p class="swiper-container swiper-container-horizontal">
<p class="swiper-wrapper">
<!-- 问题1 -->
<p class="swiper-slide">
<p class="question">
<h3>1</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="1" value="1"><span class="aFont">aaaaa</span>
</label>
<label>
<input type="radio" class="b" name="1" value="2"><span class="bFont">bbbbb</span>
</label>
<label>
<input type="radio" class="c" name="1" value="3"><span class="cFont">ccccc</span>
</label>
<label>
<input type="radio" class="d" name="1" value="4"><span class="dFont">ddddd</span>
</label>
</p>
</p>
<!-- 问题2 -->
<p class="swiper-slide">
<p class="question">
<h3>2</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="2">a
</label>
<label>
<input type="radio" class="b" name="2">b
</label>
<label>
<input type="radio" class="c" name="2">c
</label>
<label>
<input type="radio" class="d" name="2">d
</label>
</p>
</p>
<!-- 问题3 -->
<p class="swiper-slide">
<p class="question">
<h3>3</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="3">a
</label>
<label>
<input type="radio" class="b" name="3">b
</label>
<label>
<input type="radio" class="c" name="3">c
</label>
<label>
<input type="radio" class="d" name="3">d
</label>
</p>
</p>
<!-- 问题4 -->
<p class="swiper-slide">
<p class="question">
<h3>4</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="4">a
</label>
<label>
<input type="radio" class="b" name="4">b
</label>
<label>
<input type="radio" class="c" name="4">c
</label>
<label>
<input type="radio" class="d" name="4">d
</label>
</p>
</p>
<!-- 问题5 -->
<p class="swiper-slide">
<p class="question">
<h3>5</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="5">a
</label>
<label>
<input type="radio" class="b" name="5">b
</label>
<label>
<input type="radio" class="c" name="5">c
</label>
<label>
<input type="radio" class="d" name="5">d
</label>
</p>
</p>
<!-- 问题6 -->
<p class="swiper-slide">
<p class="question">
<h3>6</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="6">a
</label>
<label>
<input type="radio" class="b" name="6">b
</label>
<label>
<input type="radio" class="c" name="6">c
</label>
<label>
<input type="radio" class="d" name="6">d
</label>
</p>
</p>
<!-- 问题7 -->
<p class="swiper-slide">
<p class="question">
<h3>7</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="7">a
</label>
<label>
<input type="radio" class="b" name="7">b
</label>
<label>
<input type="radio" class="c" name="7">c
</label>
<label>
<input type="radio" class="d" name="7">d
</label>
</p>
</p>
<!-- 问题8 -->
<p class="swiper-slide">
<p class="question">
<h3>8</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="8">a
</label>
<label>
<input type="radio" class="b" name="8">b
</label>
<label>
<input type="radio" class="c" name="8">c
</label>
<label>
<input type="radio" class="d" name="8">d
</label>
</p>
</p>
<!-- 问题9 -->
<p class="swiper-slide">
<p class="question">
<h3>9</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="9">a
</label>
<label>
<input type="radio" class="b" name="9">b
</label>
<label>
<input type="radio" class="c" name="9">c
</label>
<label>
<input type="radio" class="d" name="9">d
</label>
</p>
</p>
<!-- 问题10 -->
<p class="swiper-slide">
<p class="question">
<h3>10</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="10">a
</label>
<label>
<input type="radio" class="b" name="10">b
</label>
<label>
<input type="radio" class="c" name="10">c
</label>
<label>
<input type="radio" class="d" name="10">d
</label>
</p>
</p>
<!-- 问题11 -->
<p class="swiper-slide">
<p class="question">
<h3>11</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="11">a
</label>
<label>
<input type="radio" class="b" name="11">b
</label>
<label>
<input type="radio" class="c" name="11">c
</label>
<label>
<input type="radio" class="d" name="11">d
</label>
</p>
</p>
</p>
</p>
</p>
</section>
<!-- 第三页 -->
<section class="page3">
<p class="result">
<p id="result">这是结果</p>
</p>
</section>
</body>
<script>
//记分设置
$(document).ready(function(){
$(".choice input[type = 'radio']").on("click",count);
});
//count设置
function count(){
var localResult = 0;
for (var i = 1;i <= 10;i++){
var option = $(".choice input[name = '"+i+"']:checked");
if (option.attr("class")){
var score = 0;
switch (option.attr("class")){
case "a":
score = score + 1;
break;
case "b":
score = score + 2;
break;
case "c":
score = score + 3;
break;
case "d":
score = score + 4;
break;
default :
break;
}
localResult += score;
}
}
console.log(localResult);
if (localResult <= 10){
$("#result").text("小于等于10")
}else if (localResult <= 20){
$("#result").text("小于等于20")
}else if (localResult <= 30){
$("#result").text("小于等于30")
}else{
$("#result").text("小于等于40")
}
}
</script>
我想大声告诉你2017-05-19 10:37:56
//Only for your multiple-choice questions, and each question has a value
//Although you said there are ten questions and the code you posted is 11, the length is still 10
$(document).ready(function() {
//存储选项值
var valueArr = [];
//总分值
var value = 0;
//已选长度
var checkedLength;
//题目个数
var length = 10;
//分值存入valueArr
function count() {
var $parent = $(this).parents('.swiper-slide');
console.log($parent,$parent.index('.swiper-slide'))
valueArr[$parent.index('.swiper-wrapper .swiper-slide')] = $(this).val();
//触发自定义事件
$('.swiper-wrapper').trigger('valueChange');
}
//点击触发计分
$(".choice input[type = 'radio']").on("click", count);
//绑定自定义事件
$('.swiper-wrapper').on('valueChange',function(){
checkedLength = $('.choice input:checked').length;
//判断是否全选
if(checkedLength==length){
value = 0;
console.log(valueArr)
valueArr.forEach(function(i){
value += Number(i);
})
$('#result').html(value);
}
})
});phpcn_u15822017-05-19 10:37:56
Can’t he just add up the values of all the inputs when submitting the questionnaire
高洛峰2017-05-19 10:37:56
Actually, it can’t be calculated like this. When calculating the user's score, we need to re-calculate it. If we do this, how can a situation like -1+2 appear? This may be a re-accumulation
阿神2017-05-19 10:37:56
If the total score pops up after 10 questions have been selected, wouldn’t it be nice to get the scores corresponding to the selected answers to all questions at the end? If there is no need to select, add them up immediately.
世界只因有你2017-05-19 10:37:56
For question 11, no matter how you click, the score will not be added or subtracted.
Because you didn't calculate it, the code doesn't need to be changed, just change 10 to 11.
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.js"></script>
<body>
<!-- 第一页 -->
<section class="page1">
<p class="swipers logo">
<p class="welcome">
<h3>主标题</h3>
<p>副标题</p>
</p>
<a href="#" class="start">开始测试</a>
</p>
</section>
<!-- 第二页 -->
<section class="page2">
<header class="head">
<p class="swiper-pagination swiper-pagination-bullets pagination">
</p>
</header>
<p class="swipers">
<p class="swiper-container swiper-container-horizontal">
<p class="swiper-wrapper">
<!-- 问题1 -->
<p class="swiper-slide">
<p class="question">
<h3>1</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="1" value="1"><span class="aFont">aaaaa</span>
</label>
<label>
<input type="radio" class="b" name="1" value="2"><span class="bFont">bbbbb</span>
</label>
<label>
<input type="radio" class="c" name="1" value="3"><span class="cFont">ccccc</span>
</label>
<label>
<input type="radio" class="d" name="1" value="4"><span class="dFont">ddddd</span>
</label>
</p>
</p>
<!-- 问题2 -->
<p class="swiper-slide">
<p class="question">
<h3>2</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="2">a
</label>
<label>
<input type="radio" class="b" name="2">b
</label>
<label>
<input type="radio" class="c" name="2">c
</label>
<label>
<input type="radio" class="d" name="2">d
</label>
</p>
</p>
<!-- 问题3 -->
<p class="swiper-slide">
<p class="question">
<h3>3</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="3">a
</label>
<label>
<input type="radio" class="b" name="3">b
</label>
<label>
<input type="radio" class="c" name="3">c
</label>
<label>
<input type="radio" class="d" name="3">d
</label>
</p>
</p>
<!-- 问题4 -->
<p class="swiper-slide">
<p class="question">
<h3>4</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="4">a
</label>
<label>
<input type="radio" class="b" name="4">b
</label>
<label>
<input type="radio" class="c" name="4">c
</label>
<label>
<input type="radio" class="d" name="4">d
</label>
</p>
</p>
<!-- 问题5 -->
<p class="swiper-slide">
<p class="question">
<h3>5</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="5">a
</label>
<label>
<input type="radio" class="b" name="5">b
</label>
<label>
<input type="radio" class="c" name="5">c
</label>
<label>
<input type="radio" class="d" name="5">d
</label>
</p>
</p>
<!-- 问题6 -->
<p class="swiper-slide">
<p class="question">
<h3>6</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="6">a
</label>
<label>
<input type="radio" class="b" name="6">b
</label>
<label>
<input type="radio" class="c" name="6">c
</label>
<label>
<input type="radio" class="d" name="6">d
</label>
</p>
</p>
<!-- 问题7 -->
<p class="swiper-slide">
<p class="question">
<h3>7</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="7">a
</label>
<label>
<input type="radio" class="b" name="7">b
</label>
<label>
<input type="radio" class="c" name="7">c
</label>
<label>
<input type="radio" class="d" name="7">d
</label>
</p>
</p>
<!-- 问题8 -->
<p class="swiper-slide">
<p class="question">
<h3>8</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="8">a
</label>
<label>
<input type="radio" class="b" name="8">b
</label>
<label>
<input type="radio" class="c" name="8">c
</label>
<label>
<input type="radio" class="d" name="8">d
</label>
</p>
</p>
<!-- 问题9 -->
<p class="swiper-slide">
<p class="question">
<h3>9</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="9">a
</label>
<label>
<input type="radio" class="b" name="9">b
</label>
<label>
<input type="radio" class="c" name="9">c
</label>
<label>
<input type="radio" class="d" name="9">d
</label>
</p>
</p>
<!-- 问题10 -->
<p class="swiper-slide">
<p class="question">
<h3>10</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="10">a
</label>
<label>
<input type="radio" class="b" name="10">b
</label>
<label>
<input type="radio" class="c" name="10">c
</label>
<label>
<input type="radio" class="d" name="10">d
</label>
</p>
</p>
<!-- 问题11 -->
<p class="swiper-slide">
<p class="question">
<h3>11</h3>
</p>
<p class="choice">
<label>
<input type="radio" class="a" name="11">a
</label>
<label>
<input type="radio" class="b" name="11">b
</label>
<label>
<input type="radio" class="c" name="11">c
</label>
<label>
<input type="radio" class="d" name="11">d
</label>
</p>
</p>
</p>
</p>
</p>
</section>
<!-- 第三页 -->
<section class="page3">
<p class="result">
<p id="result">这是结果</p>
</p>
</section>
</body>
<script>
//记分设置
$(document).ready(function(){
$(".choice input[type = 'radio']").on("click",count);
});
//count设置
function count(){
var localResult = 0;
for (var i = 1;i <= 11;i++){
var option = $(".choice input[name = '"+i+"']:checked");
if (option.attr("class")){
var score = 0;
switch (option.attr("class")){
case "a":
score = score + 1;
break;
case "b":
score = score + 2;
break;
case "c":
score = score + 3;
break;
case "d":
score = score + 4;
break;
default :
break;
}
localResult += score;
}
}
console.log(localResult);
if (localResult <= 10){
$("#result").text("小于等于10")
}else if (localResult <= 20){
$("#result").text("小于等于20")
}else if (localResult <= 30){
$("#result").text("小于等于30")
}else{
$("#result").text("小于等于40")
}
}
</script>phpcn_u15822017-05-19 10:37:56
$(function(){
var item = {};
item.length = 0;
$("input").click(function(){//绑定点击事件
if(!($(this).attr("name") in item)){
item.length = item.length + 1;
}
item[$(this).attr("name")] = $(this).attr("class");
//console.log(item);
if(item.length === 11){
countScore();
}
})
function countScore(){//统计得分
var total = 0;
for(var i in item){
switch (item[i]){
case "a":
total = total+1;
break;
case "b":
total = total+2;
break;
case "c":
total = total+3;
break;
case "d":
total = total+4;
break;
default:
break;
}
}
console.log(total);
}
})