Question

我正在进行在线测试，您可以直接获得输出。我被困在用循环检查无线电输入的值。为什么checkFields函数输出未定义？

Javascript代码：

    <script type="text/javascript">
        $(document).ready(function(){

//click button
$("#submitTest").click(function(){

//check if all answers are given
for (i = 1; i <= 10; i++) {
    if (checkFields([i].toString())) {

//calculate total score
    if ($("input[name=[i]]").val() == aq[i]) {score = score + 1};
}

        else{alert("Please answer all questions");
        break}};

console.log(score);

//return level of English

}
)
//setFunction
function checkFields(Q){
    console.log(
    $("[name='[Q]']:checked").val())
}
//Set score 0
var score = 0;
//Answers
var aq1 = "a1";
var aq2 = "a1";
var aq3 = "a3";
var aq4 = "a2";
var aq5 = "a1";
var aq6 = "a2";
var aq7 = "a3";
var aq8 = "a3";
var aq9 = "a1";
var aq10 = "a1";
}
)
</script>

HTML code：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- liberaries -->
    <script src="jquery-3.1.1.js"></script>
</head>
<body>
    <!-- Form -->
    <form id="testEnglish">
        <!-- Q1 -->
        <p class="question">1. Can I park here?</p>
        <input type="radio" id="1" name="1" value="a1">a1<br>
        <input type="radio" id="1" name="1" value="a2">a2<br>   
        <input type="radio" id="1" name="1" value="a3">a3
        <!-- Q2 -->
        <p class="question">2. Can I park here?</p>
        <input type="radio" name="2" value="a1">a1<br>
        <input type="radio" name="2" value="a2">a2<br>
        <input type="radio" name="2" value="a3">a3
        <!-- Q3 -->
        <p class="question">3. Can I park here?</p>
        <input type="radio" name="3" value="a1">a1<br>
        <input type="radio" name="3" value="a2">a2<br>
        <input type="radio" name="3" value="a3">a3
        <!-- Q4 -->
        <p class="question">4. Can I park here?</p>
        <input type="radio" name="4" value="a1">a1<br>
        <input type="radio" name="4" value="a2">a2<br>
        <input type="radio" name="4" value="a3">a3
        <!-- Q5 -->
        <p class="question">5. Can I park here?</p>
        <input type="radio" name="5" value="a1">a1<br>
        <input type="radio" name="5" value="a2">a2<br>
        <input type="radio" name="5" value="a3">a3
        <!-- Q6 -->
        <p class="question">6. Can I park here?</p>
        <input type="radio" name="6" value="a1">a1<br>
        <input type="radio" name="6" value="a2">a2<br>
        <input type="radio" name="6" value="a3">a3
        <!-- Q7 -->
        <p class="question">7. Can I park here?</p>
        <input type="radio" name="7" value="a1">a1<br>
        <input type="radio" name="7" value="a2">a2<br>
        <input type="radio" name="7" value="a3">a3
        <!-- Q8 -->
        <p class="question">8. Can I park here?</p>
        <input type="radio" name="8" value="a1">a1<br>
        <input type="radio" name="8" value="a2">a2<br>
        <input type="radio" name="8" value="a3">a3
        <!-- Q9 -->
        <p class="question">9. Can I park here?</p>
        <input type="radio" name="9" value="a1">a1<br>
        <input type="radio" name="9" value="a2">a2<br>
        <input type="radio" name="9" value="a3">a3
        <!-- Q10 -->
        <p class="question">10. Can I park here?</p>
        <input type="radio" name="10" value="a1">a1<br>
        <input type="radio" name="10" value="a2">a2<br>
        <input type="radio" name="10" value="a3">a3

    </form>
    <!-- Submit -->
    <button id="submitTest">Submit Test!</button>
</body>
</html>

此代码可能不是这样做的方法。我尝试了各种方法，但没有管理。

编辑

新代码

https://jsfiddle.net/5fnugrts/#&togetherjs=AOK0k8r4i2

HTML代码

<!doctype html>
          <html lang="en">
          <head>
          <meta charset="utf-8">
          <!-- Libaries -->
          <script src="jquery-3.1.1.js"></script>
          </head>
          <body>
          <!-- Form -->
          <form id="testEnglish">
            <div id="myForm"></div>
          </form>
          <!-- Submit button -->
          <button id="submitTest">Submit Test!</button>

Javascript代码

<!-- JS -->
<script type="text/javascript">
  $(document).ready(function() {
    //Answers and Questions constructor ("question","answer1","answer2","answer3","a"+number of correct answer)
    function Question(question, answer1, answer2, answer3, correctAnswer) {
      this.q = question;
      this.a1 = answer1;
      this.a2 = answer2;
      this.a3 = answer3;
      this.ca = correctAnswer;
    };
    //Answers and Questions ("question","answer1","answer2","answer3","a"+number of correct answer)
    var aQ = {
      Q1: new Question("What is the correct answer 1?", "Cheese", "Ham", "Turkey", "a1"),
      Q2: new Question("What is the correct answer 2?", "Cheese", "Ham", "Turkey", "a1"),
      Q3: new Question("What is the correct answer 3?", "Cheese", "Ham", "Turkey", "a2"),
      Q4: new Question("What is the correct answer 4?", "Cheese", "Ham", "Turkey", "a2"),
      Q5: new Question("What is the correct answer 5?", "Cheese", "Ham", "Turkey", "a3"),
    };
    //Set Setinhtml function ("name of radio group" "question","answer1","answer2","answer3","a"+number of correct answer)
    function appendQuestion(groupName, question, answer1, answer2, answer3) {
      $("div#myForm").append("<p class=\"question\">" + question + "</p>")
      $("div#myForm").append("<input type=\"radio\" name=\"" + groupName + "\" value=\"a1\">" + answer1 + "<br>")
      $("div#myForm").append("<input type=\"radio\" name=\"" + groupName + "\" value=\"a2\">" + answer2 + "<br>")
      $("div#myForm").append("<input type=\"radio\" name=\"" + groupName + "\" value=\"a3\">" + answer3 + "<br>")
    };
    //Set in HTML loop
    for (i = 1; i <= Object.keys(aQ).length; i++) {
      appendQuestion([i],
        eval("aQ.Q" + [i] + ".q"),
        eval("aQ.Q" + [i] + ".a1"),
        eval("aQ.Q" + [i] + ".a2"),
        eval("aQ.Q" + [i] + ".a3"),
        eval("aQ.Q" + [i] + ".ca"))
    };
    //Sumbit answers
    $("#submitTest").click(function() {
      score = 0
        //Loop and give values
      for (i = 1; i <= Object.keys(aQ).length; i++) {
        tAnswer = $("input:radio[name ='" + i + "']:checked").val()
        cAnswer = eval("aQ.Q" + i + ".ca")
          //Check if answers are filled in
        if (!tAnswer) {
          alert("Please answer all questions");
          return;
        }
        //Check correct answers
        else if (tAnswer == cAnswer) {
          score++
        }
      }
      //Report score
      alert("Your score is " + score + "/" + Object.keys(aQ).length);
    });
  });

</script>

Answer 1

我调整了你的代码，使其更加紧凑和有效

这是codepen

 $(document).ready(function() {
   //Set score 0
   var score = 0;
   //Answers
   aq1 = "a1";
   aq2 = "a1";
   aq3 = "a3";
   aq4 = "a2";
   aq5 = "a1";
   aq6 = "a2";
   aq7 = "a3";
   aq8 = "a3";
   aq9 = "a1";
   aq10 = "a1";

   $("#submitTest").click(function() {
     score = 0
     for (i = 1; i <= 10; i++) {
       tAnswer = $("input:radio[name ='" + i + "']:checked").val()
       cAnswer = window["aq"+i]
       if (!tAnswer) {
         alert("Please answer all questions");
         return;
       } else if (tAnswer == cAnswer) {
         console.log("#"+i+": correct")
         score++
       } else if (tAnswer != cAnswer) {
         console.log("#"+i+" incorrect")
       }
     }
    alert("Your score is "+ score +"/10");
   });
 });

tAnswer是答案，cAnswer是正确答案，您也可以查看if(!cAnswer)，然后您没有定义正确的答案。

评分测试 - 循环检查无线电输入值（JS）

编辑

1 个答案: