JSFiddle - React, Tailwind, and code Playground

by polarnnn

HTML

8q_1
<input name="SDDynamicModel[8q_1]">
<br>
<br> 8q_2
<input name="SDDynamicModel[8q_2]">
<br>
<br> 8q_3_1
<input name="SDDynamicModel[8q_3_1]">
<br>
<br> 8q_3_2
<input name="SDDynamicModel[8q_3_2]">
<br>
<br> 8q_4
<input name="SDDynamicModel[8q_4]">
<br>
<br> 8q_5
<input name="SDDynamicModel[8q_5]">
<br>
<br> 8q_6
<input name="SDDynamicModel[8q_6]">
<br>
<br> 8q_7
<input name="SDDynamicModel[8q_7]">
<br>
<br> 8q_8
<input name="SDDynamicModel[8q_8]">
<br>
<br> 8q_total
<input name="SDDynamicModel[8q_total]">

JavaScript

//total sum val
$("input[name='SDDynamicModel[8q_1]']").change(function() {
  total();
});
$("input[name='SDDynamicModel[8q_2]']").change(function() {
  total();
});
$("input[name='SDDynamicModel[8q_3_1]']").change(function() {
  total();
});
$("input[name='SDDynamicModel[8q_3_2]']").change(function() {
  total();
});
$("input[name='SDDynamicModel[8q_4]']").change(function() {
  total();
});
$("input[name='SDDynamicModel[8q_5]']").change(function() {
  total();
});
$("input[name='SDDynamicModel[8q_6]']").change(function() {
  total();
});
$("input[name='SDDynamicModel[8q_7]']").change(function() {
  total();
});
$("input[name='SDDynamicModel[8q_8]']").change(function() {
  total();
});

function total() {

  var total =
    (isNaN($("#sddynamicmodel-8q_1:checked").val()) ? 0 : $("#sddynamicmodel-8q_1:checked").val() * 1) + (isNaN($("#sddynamicmodel-8q_2:checked").val()) ? 0 : $("#sddynamicmodel-8q_2:checked").val() * 1) + (isNaN($("#sddynamicmodel-8q_3_1:checked").val()) ? 0 : $("#sddynamicmodel-8q_3_1:checked").val() * 1) + (isNaN($("#sddynamicmodel-8q_3_2:checked").val()) ? 0 : $("#sddynamicmodel-8q_3_2:checked").val() * 1) + (isNaN($("#sddynamicmodel-8q_4:checked").val()) ? 0 : $("#sddynamicmodel-8q_4:checked").val() * 1) + (isNaN($("#sddynamicmodel-8q_5:checked").val()) ? 0 : $("#sddynamicmodel-8q_5:checked").val() * 1) + (isNaN($("#sddynamicmodel-8q_6:checked").val()) ? 0 : $("#sddynamicmodel-8q_6:checked").val() * 1) + (isNaN($("#sddynamicmodel-8q_7:checked").val()) ? 0 : $("#sddynamicmodel-8q_7:checked").val() * 1) + (isNaN($("#sddynamicmodel-8q_8:checked").val()) ? 0 : $("#sddynamicmodel-8q_8:checked").val() * 1);
  $("#sddynamicmodel-8q_total").val(total);
}