检查是否选中任何单选按钮，然后执行代码(多组按钮）

Check if any radio button is checked, than execute code (multiple sets of buttons)

本文关键字：代码 按钮 执行 然后 是否 任何 单选按钮 检查      更新时间：2023-09-26

我做了一个多选测试，使用PHP解析问题和答案的XML。生成的HTML看起来像这样：

<form>
<div id="category0">
    <div id="set0">
        <div class="question">What is 6 x 6?</div>
        <input type="radio" name="0" value="3">3<br>
        <input type="radio" name="0" value="30">30<br>
        <input type="radio" name="0" value="36">36<br>
        <input type="hidden" class="answerswer" value="36">
    </div>
    <div id="set1">
        <div class="question">What is 2 x 6?</div>
        <input type="radio" name="1" value="4">4<br>
        <input type="radio" name="1" value="12">12<br>
        <input type="radio" name="1" value="36">43<br>
        <input type="hidden" class="answerswer" value="12">
    </div>
    <!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
    <div id="set2">
        <div class="question">Which of these tools would you use to hammer a nail?</div>
        <input type="radio" name="2" value="A hammer">A hammer<br>
        <input type="radio" name="2" value="Another nail">Another nail<br>
        <input type="radio" name="2" value="A saw">A saw<br>
        <input type="hidden" class="answerswer" value="A hammer">
    </div>
    <div id="set3">
        <div class="question">What color is a red truck?</div>
        <input type="radio" name="3" value="red">red<br>
        <input type="radio" name="3" value="blue">blue<br>
        <input type="radio" name="3" value="green">green<br>
        <input type="hidden" class="answerswer" value="red">
    </div>
    <!-- A LOT MORE QUESTIONS -->
</div>  
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>

类别命名为"类别"+从0开始的数字（类别0、类别1…）答案存储在一个隐藏字段中，与正确的选项值完全相同。

我创建了一个JS函数，用于检查所选答案是否正确，并根据设置div的背景进行着色。该功能是在每次无线电输入中单击时触发的。

我需要帮助为所有问题和每个类别分别创建答案的统计/分数。一开始，所有可能的答案的分数都是0。如果我点击第一个问题的正确选择，分数将是所有可能问题中的1个，以及第一类所有问题中的一个。

我想实现这一点（当点击任何按钮时），而不发布表单（没有POST/GET）。

希望我描述了我的问题，这样你就能理解，如果需要澄清，请告诉我。到目前为止，我只使用JS，但也欢迎使用jQuery中的任何解决方案。

当单击单选按钮时，执行与您已经确定答案是否正确相同的逻辑，但为您的每个"类别"调用它，而不仅仅是单击的那个类别。

从0开始一个变量，每次找到正确答案时将其递增1。然后，在循环之后，您可以使用变量的值更新"正确答案"消息。这不需要任何回发。

您可以执行类似的操作

$('input[type="radio"]').change( function(){
  var answer = $(this).siblings('.answer').val();
  if ($(this).val() == answer) {
    var score = $(this).parents().siblings('.score').val();
    score++;
    $(this).parents().siblings('.score').val(score)
    console.log(score);
  } else {
    
    }
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div id="category0">
    <div id="set0">
        <div class="question">What is 6 x 6?</div>
        <input type="radio" name="0" value="3">3<br>
        <input type="radio" name="0" value="30">30<br>
        <input type="radio" name="0" value="36">36<br>
        <input type="hidden" class="answerswer" value="36">
    </div>
    <div id="set1">
        <div class="question">What is 2 x 6?</div>
        <input type="radio" name="1" value="4">4<br>
        <input type="radio" name="1" value="12">12<br>
        <input type="radio" name="1" value="36">43<br>
        <input type="hidden" class="answerswer" value="12">
    </div>
  <input type="hidden" class="score" value="0">
    <p></p>
    <!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
    <div id="set2">
        <div class="question">Which of these tools would you use to hammer a nail?</div>
        <input type="radio" name="2" value="A hammer">A hammer<br>
        <input type="radio" name="2" value="Another nail">Another nail<br>
        <input type="radio" name="2" value="A saw">A saw<br>
        <input type="hidden" class="answerswer" value="A hammer">
    </div>
    <div id="set3">
        <div class="question">What color is a red truck?</div>
        <input type="radio" name="3" value="red">red<br>
        <input type="radio" name="3" value="blue">blue<br>
        <input type="radio" name="3" value="green">green<br>
        <input type="hidden" class="answerswer" value="red">
    </div>
  <input type="hidden" class="score" value="0">
  <p><p>
    <!-- A LOT MORE QUESTIONS -->
</div>  
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>

相关文章：