Как получить сумму отдельных столбцов переключателей

Question

У меня есть значение суммы для столбца да, но я не могу получить сумму для столбцов «НЕТ» и «Иногда». Я попытался добавить еще, если добавить сумму переключателей, которые не проверены. Поэтому проблема, с которой я сталкиваюсь, заключается в том, что всякий раз, когда я пытаюсь добавить logi c для столбца «NO», я получаю NAN.

var frm = document.forms.myForm;
frm.onchange = function(e) {
  var tot = 0;

  for (var i = 0, l = frm.elements.length; i < l; i++) {
    if (frm.elements[i].checked == true) {
      tot += parseFloat(frm.elements[i].getAttribute('value'));
    }
  }
  document.getElementById('totalYes').value = (tot / 1);
}

<form name="myForm">
  <table>
    <tr>
      <td><label for="p1">P1</label></td>
      <td><input value="1" name="p1Choice" type="radio" class="Yes"></td>
      <td><input value="1" name="p1Choice" type="radio" class="No"></td>
      <td><input value="1" name="p1Choice" type="radio" class="sometimes"></td>
    </tr>
    <tr>
      <td><label for="p2">P2</label></td>
      <td><input value="1" name="p2Choice" type="radio" class="Yes"></td>
      <td><input value="1" name="p2Choice" type="radio" class="No"></td>
      <td><input value="1" name="p2Choice" type="radio" class="sometimes"></td>
    </tr>
    <tr>
      <td><label for="p3">P3</label></td>
      <td><input value="1" name="p3Choice" type="radio" class="Yes"></td>
      <td><input value="1" name="p3Choice" type="radio" class="No"></td>
      <td><input value="1" name="p3Choice" type="radio" class="sometimes"></td>
    </tr>
    <tr>
      <td><label>Total =</label></td>
      <td><input type="text" id="totalYes"></td>
      <td><input type="text" id="totalNo"></td>
      <td><input type="text" id="totalSometimes"></td>
    </tr>
  </table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Answer 1

Использовать Jquery

Добавить класс (я называю его 'chkbox') для каждого флажка.

Затем добавить обработчик onclick для каждого флажка (вы также можете использовать .change ( ) вместо). Эта функция будет вызываться каждый раз при нажатии любого флажка.

Эта функция будет подсчитывать сумму каждого «да», «нет» или «иногда».

$(".chkbox").click(function() {

  var checkboxes = $(".chkbox");
  var totalYes = 0;
  var totalNo = 0;
  var totalStm = 0;
  for(var i = 0; i < checkboxes.length; i++) {
    var currentCheckbox = $(checkboxes[i]);
    
    if(currentCheckbox.prop("checked")) {
      if(currentCheckbox.hasClass("Yes")) {
        totalYes = totalYes + 1;
      }
      if(currentCheckbox.hasClass("No")) {
        totalNo = totalNo + 1;
      }
      if(currentCheckbox.hasClass("sometimes")) {
        totalStm = totalStm + 1;
      }
    }
    
  }
  
  $("#totalYes").val(totalYes);
  $("#totalNo").val(totalNo);
  $("#totalSometimes").val(totalStm);

});

<form name="myForm" id="myForm">
  <table>
    <tr>
      <td><label for="p1">P1</label></td>
      <td><input value="1" name="p1Choice" type="radio" class="Yes chkbox"></td>
      <td><input value="1" name="p1Choice" type="radio" class="No chkbox"></td>
      <td><input value="1" name="p1Choice" type="radio" class="sometimes chkbox"></td>
    </tr>
    <tr>
      <td><label for="p2">P2</label></td>
      <td><input value="1" name="p2Choice" type="radio" class="Yes chkbox"></td>
      <td><input value="1" name="p2Choice" type="radio" class="No chkbox"></td>
      <td><input value="1" name="p2Choice" type="radio" class="sometimes chkbox"></td>
    </tr>
    <tr>
      <td><label for="p3">P3</label></td>
      <td><input value="1" name="p3Choice" type="radio" class="Yes chkbox"></td>
      <td><input value="1" name="p3Choice" type="radio" class="No chkbox"></td>
      <td><input value="1" name="p3Choice" type="radio" class="sometimes chkbox"></td>
    </tr>
    <tr>
      <td><label>Total =</label></td>
      <td><input type="text" id="totalYes"></td>
      <td><input type="text" id="totalNo"></td>
      <td><input type="text" id="totalSometimes"></td>
    </tr>
  </table>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>