检查带有答案的特定复选框答案

【问题标题】：Checking Against Specific Checkboxes with the Answers检查带有答案的特定复选框
【发布时间】：2016-11-03 21:51:58
【问题描述】：

我已经对 Stack Overflow 做了很多研究，试图回答这个问题，但大多数答案都是为了回答这个问题。

我试图在选择答案后锁定问题，并告诉用户问题是对还是错。

我对多个复选框样式问题的解决方案是在他们选择答案后有一个“确认”按钮。在这种情况下，我为我构建了一个通用函数来传递答案并为我映射它们。但是，我正在努力为多个复选框提出解决方案。

解决方案必须围绕 javascript/jquery，因为我无法控制从我使用的表单生成器生成的 HTML。

TL;DR

我下面的解决方案无法正确识别问题 14 的错误答案，它只会弹出“正确！”如果选项 3 和 4 都被选中。

目前，如果他们选择 3 和任何其他选项，它会弹出正确的。

要使用的版本：Fiddle

HTML：

<div id="q14" class="q required highlight">
<a class="item_anchor" name="ItemAnchor25"></a>
<span class="question top_question">14. Life policy purchase evaluations include which of the following (choose all that apply):&nbsp;<b class="icon_required" style="color:#FF0000">*</b></span>
<table class="inline_grid">
<tbody><tr>
<td><input type="checkbox" name="RESULT_CheckBox-25" class="multiple_choice" id="RESULT_CheckBox-25_0" value="CheckBox-0" readonly=""><label for="RESULT_CheckBox-25_0">Insured’s credit rating</label></td>
</tr>
<tr>
<td><input type="checkbox" name="RESULT_CheckBox-25" class="multiple_choice" id="RESULT_CheckBox-25_1" value="CheckBox-1" readonly=""><label for="RESULT_CheckBox-25_1">Employment history</label></td>
</tr>
<tr>
<td><input type="checkbox" name="RESULT_CheckBox-25" class="multiple_choice" id="RESULT_CheckBox-25_2" value="CheckBox-2" readonly=""><label for="RESULT_CheckBox-25_2">Medical records</label></td>
</tr>
<tr>
<td><input type="checkbox" name="RESULT_CheckBox-25" class="multiple_choice" id="RESULT_CheckBox-25_3" value="CheckBox-3" readonly=""><label for="RESULT_CheckBox-25_3">Insurer’s credit rating</label></td>
</tr>
</tbody></table>
</div>

Javascript：

$(document).ready(function(){
var content = document.body.textContent || document.body.innerText;
var hasText = content.indexOf("10. What is the minimum initial investment for a non-retirement investor in this program?")!==-1;

//page 4 questions
if(hasText){
    var correctNumber = [1, 0, 0, 1, 23, 1];
    createQuiz(correctNumber);
}

//Dynamically grabs questions, answers, and creates alert boxes for each section of radio buttons
function createQuiz(correctNumber){

    $("span.question").each(function(i){

        var question = $(this).parent("div").find($(".multiple_choice")).attr("name"); //get the question name attribute
        var parentDiv = $(this).parent("div").attr("id"); //get the parent div id

        //set the alert box HTML
        $(this).parent("div").after("<br><br><br><div id='"+parentDiv+"_success' class='alert alert-success'><strong>Correct!</strong></div><div id='"+parentDiv+"_fail' class='alert alert-danger'><strong>Incorrect!</strong></div>");
        $("#"+parentDiv+"_fail").hide(); //hide alert box
        $("#"+parentDiv+"_success").hide();//hide alert box

        if($(this).parent("div").find($(".multiple_choice")).attr("type")=='radio'){

            $("input[name='"+question+"']").on("click keypress", function(){

                $("input[name='"+question+"']").prop('disabled', true);
                $("input[name='"+question+"']:radio:not(:checked)").attr('disabled', true);
                $(this).attr('disabled', false);

                if($("#"+question+"_"+correctNumber[i]).is(':checked')){
                    $("#"+parentDiv+"_success").show();
                    $("#"+parentDiv+"_fail").hide();
                } 
                else {
                    $("#"+parentDiv+"_success").hide();
                    $("#"+parentDiv+"_fail").show();
                }

                $('.tooltip').tooltipster({
                    contentAsHTML: true,
                    maxWidth: '480',
                    animation: 'grow',
                    side: ['right', 'top', 'bottom', 'left']
                });

            }); //end on click/keypress

        } else if ($(this).parent("div").find($(".multiple_choice")).attr("type")=='checkbox'){

            $("#"+parentDiv+"_success").before("<button id='"+parentDiv+"_confirm' style='width:200px; left:16px; position:relative;' type='button' value='Confirm'>Confirm</button>");

            $("#"+parentDiv+"_confirm").on("click keypress", function(){

                $("input[name='"+question+"']").prop('readonly', true);

                var answers = correctNumber[i].toString().split("");

                for(p=0; p < answers.length; p++){

                    var selected = [];
                    $("input[name='"+question+"']").filter(":checked").each(function() {

                        if(question+"_"+answers[p] == $(this).attr('id') && $("input[name='"+question+"']").filter(":checked").length == answers.length){
                            $("#"+parentDiv+"_success").show();
                            $("#"+parentDiv+"_fail").hide();
                        } 
                        else {
                            $("#"+parentDiv+"_success").hide();
                            $("#"+parentDiv+"_fail").show();
                        }

                    });

                    // if($("#"+question+"_"+answers[p]).is(':checked') && $("input[name='"+question+"']").filter(":checked").length == answers.length){
                    //  $("#"+parentDiv+"_success").show();
                    //  $("#"+parentDiv+"_fail").hide();
                    // } 
                    // else {
                    //  $("#"+parentDiv+"_success").hide();
                    //  $("#"+parentDiv+"_fail").show();
                    // }

                    $('.tooltip').tooltipster({
                        contentAsHTML: true,
                        maxWidth: '480',
                        animation: 'grow',
                        side: ['right', 'top', 'bottom', 'left']
                    });

                } //end for loop

            }); //end on click/keypress

        } //end outer if

    }); //end outer each
} //end createQuiz function



}); //end document ready

【问题讨论】：

我在 Fiddle 中尝试过，多项选择题似乎工作正常。
您是否尝试回答“4”和任何其他答案？ 3和4正常工作，问题是如果你选择'2'和'4'，或者'1'和'4'，当它应该不正确时它仍然弹出正确。很奇怪，我在实际表单上的行为有所不同，但当您尝试“3”和“2”时，它并没有按预期工作。
4 对与任何其他工作正常，但 3 对与任何其他工作不正确。我认为您可能需要编辑有关错误的信息（将“4”更改为“3”）

标签： javascript jquery html checkbox multiple-choice

【解决方案1】：

今天早上我想出了答案。

我的问题出在这个 for 循环上，如果我选择 2 和 4（或者在小提琴中选择 1 和 3），我正在遍历答案，我通过了 23。然后它响应正确，因为在最后一次迭代中，它会发现最后一个复选框被选中，并且选中了 2 个复选框。

for(p=0; p < answers.length; p++){

     var selected = [];
     $("input[name='"+question+"']").filter(":checked").each(function() {

        if(question+"_"+answers[p] == $(this).attr('id') && $("input[name='"+question+"']").filter(":checked").length == answers.length){
           $("#"+parentDiv+"_success").show();
           $("#"+parentDiv+"_fail").hide();
        } 
        else {
           $("#"+parentDiv+"_success").hide();
           $("#"+parentDiv+"_fail").show();
        }

     });

} //end for loop

我的解决方案是迭代检查了哪些复选框并返回已检查的组合索引并将其与答案进行比较。

例如我通过'23'，他们检查'1'和'4'，'14'！='23'，所以不正确。

$("#"+parentDiv+"_confirm").on("click keypress", function(){

  $("input[name='"+question+"']").prop('readonly', true);

  var answers = correctNumber[i];

  var input = "";

  $("input[name='"+question+"']").each(function(t){

      if($(this).is(':checked')){
          input = ""+input+t;
      }

  });

  if(input == answers){
      $("#"+parentDiv+"_success").show();
      $("#"+parentDiv+"_fail").hide();
  } 
  else {
      $("#"+parentDiv+"_success").hide();
      $("#"+parentDiv+"_fail").show();
  }


}); //end on click/keypress

【讨论】：