Question

我有这样的多选收音机：

<div class="quiz">
   <div class="question">Question 1</div>
   <ul>
      <li><label><input type="radio" name="q1" id="q1-a" />Answer 1a</label></li>
      <li><label><input type="radio" name="q1" id="q1-b" />Answer 1b</label></li>
      <li><label><input type="radio" name="q1" id="q1-c" />Answer 1c</label></li>
   </ul>
</div>
<div class="question">Question 2</div>
<ul>
   <li><label><input type="radio" name="q2" id="q2-a" />Answer 2a</label></li>
   <li><label><input type="radio" name="q2" id="q2-b" />Answer 2b</label></li>
   <li><label><input type="radio" name="q2" id="q2-c" />Answer 2c</label></li>
</ul>
</div>
<div class="question">Question 3</div>
<ul>
   <li><label><input type="radio" name="q3" id="q3-a" />Answer 3a</label></li>
   <li><label><input type="radio" name="q3" id="q3-b" />Answer 3b</label></li>
   <li><label><input type="radio" name="q3" id="q3-c" />Answer 3c</label></li>
</ul>
</div>
</div>
<div class="next">
   <a class="btnNext">Next &gt;&gt;</a>
</div>

我有3个答案。答案1（q1-a，q2-a，q3-a），答案2（q1-b，q2-b，q3-b），答案1（q1-c，q2-c，q3-c）。我想制作一个JS代码来计算玩家为每种情况选择的答案。

$('.btnNext').click(function() {
     var c1a = document.getElementById("q1-a");
     var c1b = document.getElementById("q1-b");
     var c1c = document.getElementById("q1-c");

     var c2a = document.getElementById("q2-a");
     var c2b = document.getElementById("q2-b");
     var c2c = document.getElementById("q2-c");

     var c3a = document.getElementById("q3-a");
     var c3b = document.getElementById("q3-b");
     var c3c = document.getElementById("q3-c");

     var c4a = document.getElementById("q4-a");
     var c4b = document.getElementById("q4-b");
     var c4c = document.getElementById("q4-c");

     var nhom1 = 0;
     if (c1a.checked || c2a.checked || c3a.checked || c4a.checked) nhom1++;

     var nhom2 = 0;
     if (c1b.checked || c2b.checked || c3b.checked || c4b.checked) nhom2++;

     var nhom3 = 0;
     if (c1c.checked || c2c.checked || c3c.checked || c4c.checked) nhom3++;

     var arrnhom = [nhom1, nhom2, nhom3];
     var nm = Math.max.apply(Math, arrnhom);

     if (nm = nhom1) {
         $(".area1").css("do sthing here")
     }
     if (nm = nhom2) {
         $(".area2").css("do sthing here")
     }
     if (nm = nhom3) {
         $(".area3").css("do sthing here")
     }
 });

但事实并非如此，它可能只计为1。请帮忙。

Answer 1

这不是最好的方法，但是当您使用jQuery时，您可以这样做：

首先，在所有输入中添加一个类似于＆＃39; A＆＃39;＆＃39; B＆＃39;或者＆＃39; C＆＃39 ;; 然后你就可以做到：

var aCount = $('input[type="radio"][value="A"]:checked').length,
    bCount = $('input[type="radio"][value="B"]:checked').length,
    cCount = $('input[type="radio"][value="C"]:checked').length;

这是快速和糟糕的解决方案。请尝试something like this。

Answer 2

$(function(){
  $('.btnNext').click(function() {
    var nhom1 = 0;
    $(".a1").each(function() {
      if($(this).is(":checked")) nhom1+=1;
    });
    var nhom2 = 0;
    $(".b1").each(function() {
      if($(this).is(":checked")) nhom2+=1;
    });
    var nhom3 = 0;
    $(".c1").each(function() {
      if($(this).is(":checked")) nhom3+=1;
    });
    var arrnhom = [nhom1, nhom2, nhom3];
    var nm = Math.max.apply(Math, arrnhom);
    console.log(arrnhom);
    console.log(nm);
    if (nm == nhom1) {
      console.log("area1");
    }
    if (nm == nhom2) {
      console.log("area2");
    }
    if (nm == nhom3) {
      console.log("area3");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="quiz">
   <div class="question">Question 1</div>
   <ul>
      <li><label><input type="radio" name="q1" class="input a1">Answer 1a</label></li>
      <li><label><input type="radio" name="q1" class="input b1">Answer 1b</label></li>
      <li><label><input type="radio" name="q1" class="input c1">Answer 1c</label></li>
   </ul>
</div>

<div>
   <div class="question">Question 2</div>
   <ul>
      <li><label><input type="radio" name="q2" class="input a1">Answer 2a</label></li>
      <li><label><input type="radio" name="q2" class="input b1">Answer 2b</label></li>
      <li><label><input type="radio" name="q2" class="input c1">Answer 2c</label></li>
   </ul>
</div>

<div>
   <div class="question">Question 3</div>
   <ul>
      <li><label><input type="radio" name="q3" class="input a1">Answer 3a</label></li>
      <li><label><input type="radio" name="q3" class="input b1">Answer 3b</label></li>
      <li><label><input type="radio" name="q3" class="input c1">Answer 3c</label></li>
   </ul>
</div>

<div>
   <div class="question">Question 4</div>
   <ul>
      <li><label><input type="radio" name="q4" class="input a1">Answer 4a</label></li>
      <li><label><input type="radio" name="q4" class="input b1">Answer 4b</label></li>
      <li><label><input type="radio" name="q4" class="input c1">Answer 4c</label></li>
   </ul>
</div>

<div class="next">
   <a class="btnNext">Next &gt;&gt;</a>
</div>

Javascript收音机检查并计数

2 个答案: