Javascript 无线电检查和计数

bangtown

我有一个这样的多选收音机:

<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。请帮忙。

亚历山德里奥

$(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>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章