CODEWITHSUNDEEP
jqueryhtml
Pvas
Pvas

Reputation: 49

How to get sum of individual columns of radio buttons

I have the sum value for the yes column done but I cant get the sum for the "NO" and "Sometimes" column. I tried adding an else if to add the sum of radio buttons that are not checked. So the problem I m running into is that whenever I try to add logic for the "NO" column I get a 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>

Upvotes: 0

Views: 121

Answers (1)

Kristian
Kristian

Reputation: 2505

Use Jquery

Add a class (I call it 'chkbox') to each checkbox.

Then add an onclick handler for each checkbox (you can also use .change() instead). That function will be called every time any of the checkbox being clicked.

That function will count the total of each 'yes','no' or 'sometimes'.

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

Upvotes: 1

Related Questions