使用此示例检查多个单选按钮 JQuery 的值并显示 HTML 中的值

Question

   //check selections
     $("input[type='button']").click(function(){

   // get the values of the radios here                                      
        var radioValue = $("input[name='q1']:checked").val();
        var answer = "Oxi Codine";

   //process    
        if(radioValue === answer){
            $("#question").text("Question: Which of the following is the most appropriate next step in management of this patient? Your are correct the answer is: " + radioValue + ".");

        }else{
            $("#question").text("Question: Which of the following is the most appropriate next step in management of this patient? You answered " + radioValue + " that is incorrect. The correct answer is " + answer + ".");


        }
     });

我的广播组名称为："q1"、"q2"、"q3" 我无法让它循环播放。它仅适用于一个单选按钮组。 此外，每个问题都有一个答案，我需要出示并检查它是否正确。

Answer 1

如果您稍微修改标记，就可以将值存储在那里并进行处理。

修改后的标记：

<li class="quest" data-answer="Cystic hygroma">

代码：

$(document).ready(function () {
    $("input[type='button']").click(function () {
        // get the values of the radios here 
        var radioValue = [{}];
        $("input[type=radio]:checked").each(function (index) {
            radioValue[index] = {
                choice: $(this).val(),
                answer: $(this).parents('.quest').data("answer"),
                index: index
            };
        });

        //process   
        var i = 0;
        for (i; i < radioValue.length; i++) {
            var question = "Question: " + $(this).parents('.quest').eq(radioValue[i].index).text();
            if (radioValue[i].answer === radioValue[i].choice) {
                $("#question").text(question + "You're are correct the answer is: " + radioValue[i].answer + ".");
            } else {
                $("#question").text(question + " You answered " + radioValue[i].choice + " that is incorrect. The correct answer is " + radioValue[i].answer + ".");
            }
            $("#summary").show();
        }

    });
});

这里略作修改：https://jsfiddle.net/MarkSchultheiss/3pwdcsgx/6/

请注意，我只做了第一个，但您可以将其用作模式。对于您发布的 "answer" 文本，我没有采取任何措施 - 您需要确定您希望如何处理后续文本 (right/wrong)。如果这也很重要，这不会检查未回答的问题。

编辑 - 回复：无问题评论

你是对的 - 我让它工作，但后来做了一个修改，破坏了它。这里的一个问题是，在被替换的#question 节点的文本中获取 "question" 文本的唯一方法。因此，我建议如果这是所需的功能，则将实际问题存储在数据元素中，然后将其用作已处理答案中的文本——因为这是我唯一拥有的 "view" 数据。

我更新了 fiddle 并将问题数据放入我创建的对象中（来自 .quest class 父元素）。这对于覆盖 #question 元素来说有点难看，但它应该给你一些想法来构建，像我一样存储问题和正确答案。 https://jsfiddle.net/MarkSchultheiss/3pwdcsgx/9/

重要部分截图：

   $("input[type=radio]:checked").each(function (index) {
       radioValue[index] = {
           choice: $(this).val(),
           answer: $(this).parents('.quest').data("answer"),
           question: $(this).parents('.quest').data("question"),
           index: index
       };
    });

第一个问题的更新标记：

<li class="quest" data-answer="Cystic hygroma" data-question="Which of the following abnormalities is illustrated in figure 1?">

Answer 2

太棒了。谢谢您的帮助。我想我可以在其中添加中断以将每个问题和答案放在自己的行上。

使用此示例检查多个单选按钮 JQuery 的值并显示 HTML 中的值

Checking value of Multiple Radio Buttons JQuery and showing the value in HTML using this example

jquery

button

radio-button