javascript摘要我检查的输入
js__exam_questions();
function js__exam_questions() {
$('.js__sum_score_btn').on('click', function(event) {
event.preventDefault();
var num = 0;
if ($('.js__checked_task input').is(':checked')) {
num ++;
} else {
return false;
}
$('.js__checked_task');
return $('.js__qustions_result').html( num || 'null');
});
}.d-inline {
display: inline-block;
}
.fz33 {
font-size: 33px;
}<script
src="https://code.jquery.com/jquery-3.2.1.min.js"> </script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section id="questions">
<div class="questions__bg">
<div class="container">
<div class="row">
<!-- head -->
<div class="col-md-8">
<div class="control-group">
<h1>Questions:</h1>
<button type="button" class="js__sum_score_btn btn btn-default mb50">SUMMARY</button>
</div>
</div>
<div class="col-md-4">
<div class="control-group">
<h1 class="mr10 d-inline">Score:</h1><span class="js__qustions_result fz33">0</span>
</div>
</div>
<!-- task-1 -->
<div class="col-md-6 pb50 js__checked_task">
<div id="myquestions-1">
<h4 class="quest__h4">
<strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
<label class="radio-inline">
<input type="radio" name="questions_stage_1">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_1">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_1">Option 3
</label>
</div>
</div>
<!-- task-2 -->
<div class="col-md-6 pb50 js__checked_task">
<div id="myquestions-2">
<h4 class="quest__h4">
<strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
<label class="radio-inline">
<input type="radio" name="questions_stage_2">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_2">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_2">Option 3
</label>
</div>
</div>
<!-- task-3 -->
<div class="col-md-6 pb50 js__checked_task">
<div id="myquestions-3">
<h4 class="quest__h4">
<strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
<label class="radio-inline">
<input type="radio" name="questions_stage_3">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_3">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_3">Option 3
</label>
</div>
</div>
<!-- task-4 -->
<div class="col-md-6 pb50 js__checked_task">
<div id="myquestions-4">
<h4 class="quest__h4">
<strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
<label class="radio-inline">
<input type="radio" name="questions_stage_4">Option 1
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_4">Option 2
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_4">Option 3
</label>
</div>
</div>
</div>
</div>
</div>
</section>我不确定你的意思是“分别计算每个问题”。 但是，如果你想要的是一个函数，给定一个（预定的）正确答案集，给你一个'你的分数是X'的答案，那么你确实可以使用jQuery的each（）。
您首先需要给每个答案（每个块）赋予“值”，例如：
<div class="col-md-6 pb50 js__checked_task">
<div id="myquestions-1">
<h4 class="quest__h4">
<strong>Question</strong>: Lorem ipsum dolor sit amet, consectetur adipisicing.</h4>
<label class="radio-inline">
<input type="radio" name="questions_stage_1" value='1'>Option 1
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_1" value='2'>Option 2
</label>
<label class="radio-inline">
<input type="radio" name="questions_stage_1" value='3'>Option 3
</label>
</div>
</div>
<!-- Do the same for every block with value 1,2,3 -->
然后你可以定义下面的jquery函数
$('.js__sum_score_btn').on('click', function(event) {
var score = 0;
const answers = [1,1,2,3]; //your set of correct answers
$('.js__checked_task').each(function(index) {
var selectedQuestion = $("input[type='radio']:checked", this).val();
if (selectedQuestion == answers[index]) {score++}
})
console.log('Your score is: ' + score);
});
编辑 ：如果你想保持服务器端的验证（即答案列表存在），那么你可以保留在客户端的处理，然后将答案列表发送到服务器进行验证。 一种方法是使用ajax：
客户端js
$('.js__sum_score_btn').on('click', function(event) {
var answers = []; //the user's set of answers
$('.js__checked_task').each(function(index) {
var selectedQuestion = $("input[type='radio']:checked", this).val();
answers[index] = selectedQuestion;
});
$.ajax({
url: 'your_server_url',
data: {"answers": JSON.stringify(answers)},
datatype: 'json',
type: 'post',
error: function() {//do stuff},
success: function(data) {console.log('your score is ' + data.score)},
})
});
这样，你的服务器端只需要比较发送给它的列表和设置的答案，然后将得分作为答案传回。 请注意，我给出的代码是一个使用json数据的示例，因此您在服务器中获得的数据将是json，并且您必须将返回的json看起来像{"score": score}工作（如果它不是json，ajax会因为参数'datatype'设置为'json'而抛出错误。
JSON.stringify（）方法需要将该列表作为json字符串发送。 有关此方法的更多信息，可以在此处查找。
看看这个我知道它需要修改，但你可以从这里得到一个基本的概念：https://jsbin.com/dawiwameqi/edit?html,js,output这可能包含错误，需要时间来解决它们，但它会给你一个基本的想法。 向你的ans added .correct类并changed jquery code