为什么我所要求的价值没有改变？答案

【问题标题】：Why the value of what I am asking not changing?为什么我所要求的价值没有改变？
【发布时间】：2018-12-06 19:05:01
【问题描述】：

HTML:
<p id="Q1">1) Who is the chief justice of the Supreme Court? 

<input type="radio" name="CJ" value="C" class ="correct1">John Roberts
 <input type="radio" name="CJ" value="F" class ="correct1"> Neil Goursuch 
 <input type="radio" name="CJ" value="F" class ="correct1"> Ruth Bayder 
Ginsburg</p>

 <button class="btn btn-danger btn-lg">Done!</button>

        </div>

        <div id="results">

            <p>Correct Answers:<span id="CA"></span></p>

            <p>Incorrect Answers:<span id="IA"></span></p>

            <div id="P/F"></div>
        </div>

Javascript：

        var correctAnswer = 0;

        var wrongAnswer = 0;

        var unAnswered = 0;

        var answer1 = $( ".correct1" ).val();

    $("button").on("click", function(){
        console.log(answer1);
        if(answer1 == "C"){

            correctAnswer++;
            $("#CA").html(correctAnswer);
            console.log(correctAnswer);

        }
        else if (answer1 == "F"){

            $("#IA").html(wrongAnswer);
            wrongAnswer++;
            console.log(wrongAnswer);
        }

//即使我没有点击正确答案，或者即使我没有选择任何内容，当我点击按钮时，正确答案部分也会继续上升。即使正确选项和错误选项的选项值不同，我也不知道出了什么问题。

【问题讨论】：

标签： javascript jquery input radio-button

【解决方案1】：

您在第一次加载页面时选择checkbox 的值，然后每次单击Done 按钮时都使用该值。所以在页面加载时：

// this returns the value for the first element with class correct1
// in this case that value happens to be the correct answer so on
// page load you've already "selected" the right answer that's why 
// consecutive clicks to done just increment the correct counter
var answer1 = $( ".correct1" ).val();
// answer1 = "C";

要解决此问题，您可以在每次用户单击 Done 按钮时获取 checked 单选按钮的值：

var correctAnswer = 0;
var wrongAnswer = 0;
var unAnswered = 0;

$("button").on("click", function() {
    // get the current checked radio button
    let answer1 = $('.correct1:checked').val();
    console.log(answer1);
    if(answer1 == "C"){

        correctAnswer++;
        $("#CA").html(correctAnswer);
        console.log(correctAnswer);

    }
    else if (answer1 == "F"){

        $("#IA").html(wrongAnswer);
        wrongAnswer++;
        console.log(wrongAnswer);
    }
});

这是一个现场演示：
https://www.bootply.com/90xDYoh3vL

【讨论】：