使用 jQuery 存储来自单选按钮输入的数值

Question

我正在做一个HTML5 测验，我在其中使用yes 或no 问题的单选按钮，然后为每个单选按钮分配0 或1 的值，然后存储将数值作为变量，然后将所有变量相加即可为测验评分。

更新！！！

嘿！我进行了您建议的更改，但是当我调用变量时，它仍然显示为未定义：

这是我的html：

<form class="answer" id="question_one">
  <input type="radio" class="styled" name="first_answer" value="1"/><!-- POSITIVE ANSWER -->
  <div class="answer_text">Yes</div>
  <input type="radio" class="styled" name="first_answer" value="0" /><!-- NEGATIVE ANSWER -->
  <div class="answer_text">No</div>
</form>

这是我的 JavaScript：

$('#question_one input:radio[name=first_answer]').on('change', function () {
var first_question = parseInt(
    $("input[name=first_answer]:checked").val()
    );

}); 我试图通过仅针对 name=first_asnwer 的单选按钮来为 jQuery 对象包含更多的特殊性。也许我搞砸了？

---

Answer 1

我认为您的问题是对$(document).ready() 函数的理解。该函数在页面的所有依赖项都加载完毕后执行——CSS、JavaScript 等...

执行此函数后，您已经设置了变量，这可能在您单击第一个单选按钮之前！这里的解决方案是仅在用户完成回答后计算值。可能在无线电元素的更改事件上 -

$(document).ready(function () {
  $('input:radio').on('change',function(){
    var $first_question = parseInt($("input[name=first_answer]:checked").val());
    var $second_question = parseInt($("input[name=second_answer]:checked").val());
    $first_question = $first_question? $first_question : 0; 
    $second_question = $second_question? $second_question : 0;
    var $total_score = $first_question + $second_question;
    alert($total_score);
  });
});

Here is a simple demo