从单选按钮中获得值，一旦检查到最终分数

get value from radio button once checked to tally up final score

本文关键字：检查单选按钮更新时间：2023-09-26

我正在与单选按钮进行多项选择测验，我想在选中单选按钮后获得价值，并在结束时给出最终分数。例如"1 out of 5 correct"

引用

> 
>     $(document).ready(function() {
>       var counter = 0;
>       var score = 0;
> 
> 
>       var quizQuestions = [{
>         question: "In what year was America founded ?",
>         choices: ["1775", "1776", "1801", "1492"],
>         answer: 1
>       }, {
>         question: "Who did not sign the Declaration of Independence ?",
>         choices: ["George Wasington", "Ben Franklin", "John Hancock", "Thomas Jefferson"],
>         answer: 0
>       }, {
>         question: "Who was the only president to serve more than two terms?",
>         choices: ["George Washington", "Woodrow Wilson", "Franklin Delano Roosevelt", "James Madison"],
>         answer: 2
>       }, {
>         question: "In what year did America land on the moon ?",
>         choices: ["1969", "1965", "1970", "1968"],
>         answer: 0
>       }, {
>         question: "Which country did America buy the Louisiana Purchase from ?",
>         choices: ["England", "Spain", "Germany", "France"],
>         answer: 3
>       }]
> 
>       $("#start").click(function() {
>         $("#start").hide()
>         $("#next").show()
>       })
> 
>       $("#next").on("click", function() {
> 
>         $(".choices, .questions").empty();
> 
>         function incrementCounter() {
>           $("#count").text(counter);
>         };
> 
>         $(".questions").append("<h2>" + quizQuestions[counter].question + "</h2>")
> 
>         for (var i = 0; i < quizQuestions[counter].choices.length; i += 1) {
>           $(".choices").append("<ul>" + "<input type='radio'/>" + quizQuestions[counter].choices[i] + "</ul>")
>         }
> 
>         incrementCounter();
>         counter++
> 
>       })
> 
> 
>     });
> 
>

> 
>     body {
>       background-image: url("../img/american-flag.jpg");
>       background-repeat: no-repeat;
>       background-size: 100% 100%;
>     }
>     html,
>     body {
>       min-height: 100%;
>     }
>     .quiz-app {
>       position: relative;
>       width: 400px;
>       height: 400px;
>       background-color: white;
>       border-style: solid;
>       margin: 0 auto;
>       top: 200px;
>       text-align: center;
>     }
>     h1 {
>       color: orange;
>     }
>     #start {
>       margin-top: 70px;
>       width: 70px;
>       border-radius: 5px;
>       bottom: 150px;
>     }
>     #next {
>       display: none;
>       margin-top: 70px;
>       width: 70px;
>       border-radius: 5px;
>       bottom: 150px;
>     }
>     .questions {
>       text-align: center;
>       margin-left: 25px;
>       margin: 0 auto;
>       bottom: 120px;
>       color: red;
>     }
>     .choices {
>       display: block;
>       bottom: 100px;
>     }
>     #count {
>       width: 50px;
>       height: 20px;
>       text-align: bottom;
>     }
> 
>

> 
>     <!DOCTYPE html>
>     <html>
> 
>     <head>
>       <meta charset="UTF-8">
>       <title>Quiz Time</title>
>       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.js"
> charset="utf-8"></script>
>       <script src="js/jquery-1.11.3.min.js"></script>
>       <script src="js/jquery-1.11.3.js"></script>
>       <script src="js/app.js"></script>
>       <link rel="stylesheet" href="css/app.css">
>     </head>
> 
>     <body>
>       <!--______________________________________________________BEGIN APP-->
>       <div class="quiz-app">
>         <h1 class="title">History Quiz</h1>
> 
>         <div class="questions"></div>
> 
>         <div class="choices">
>         </div>
> 
>         <button id="start">Start</button>
>         <button id="next">Next</button>
>         <span id="count"></span>
>       </div>
> 
>     </body>
>     <!--______________________________________________________END APP-->
> 
>     </html>
> 
>

这是你要找的吗?

$(".choices input:radio").on("click", function () {
    alert('test');
});