javascript - ラジオボタンの値を所定の値と比較する

Question

選択したラジオボタンの値を所定の値と比較して、一致するかどうかに対応するテキストを表示しようとしています。これは単純なように思えますが、2 つの値が一致するかどうかに関係なく、「一致」テキストが表示されます。

これが私のコードです：

submit: function() {
    $("#submit").click(function(){
        if($("input:radio[name=answers]:checked").val() == triviaGame.correctSelection) {
            $("#result").text("Correct!");
        } else {$("#result").text("I'm sorry, you did not select the correct answer :(");}
    });

私も試しました：

submit: function() {
$("#submit").click(function() {
    if ($("input:radio[name=answers]:checked").val() == triviaGame.questions[questionSelectNum].choices[triviaGame.questions[questionSelectNum].choices[0]]) {
        $("#result").text("Correct!");
     } else {$("#result").text("I'm sorry, you did not select the correct answer :(");}
});

===そして、他の構文の微調整と==同様に試しました。

メソッドでラジオボタンの値を正しく設定していることを確認しnextQuestion、テストが機能したので、それが問題ではないと思います。私を最も困惑させているのは、実行すべきでないときに if (true) コードが実行されるのではなく、else (false) コードが実行されるべきでないときに実行されることです。これはバグである可能性が高いと思います。

ここに私のHTMLがあります:

<div>
    <button id = "nextQuestion">Next Question</button>
    <br></br> 
    <div id = "questionDisplay"></div>
    <br></br>
    <input type="radio" id= "1" name="answers" value="defaultVal">
    <label id= "labelOne">Answer 1</label>
    <br></br>
    <input type="radio" id= "2" name="answers" value="defaultVal">
    <label id= "labelTwo">Answer 2</label>
    <br></br> 
    <input type="radio" id= "3" name="answers" value="defaultVal">
    <label id= "labelThree">Answer 3</label>
    <br></br>
    <input type="radio" id= "4" name="answers" value="defaultVal">
    <label id= "labelFour">Answer 4</label>
    <br></br>
    <button id = "submit">Submit</button>
    <br></br>
    <div id= "result">Please select an answer above</div>
</div>   

jsbinの完全なコードへのリンクを次に示します。