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

Storing numerical values from radio button input using jQuery

本文关键字：输入 单选按钮 jQuery 存储 使用      更新时间：2023-09-26

我正在进行一个HTML5测验，其中我使用单选按钮回答yes或no问题，然后为每个单选按钮分配一个值0或1，然后将数值存储为一个变量，然后将所有变量加在一起为测验打分。

更新

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

这是我的html:

<form class="answerswer" id="question_one">
  <input type="radio" class="styled" name="first_answer" value="1"/><!-- POSITIVE ANSWER -->
  <div class="answerswer_text">Yes</div>
  <input type="radio" class="styled" name="first_answer" value="0" /><!-- NEGATIVE ANSWER -->
  <div class="answerswer_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()
    );

})；我试图通过只针对名称为first_asnwer的Radio Buttons来为jQuery对象添加更多的特殊性。也许我搞砸了？

我认为您在这里的问题是对$(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);
  });
});

下面是一个简单的演示

相关文章：