Question

I currently have a JS function that calculates scores based on the values of the radio buttons checked. I want my function to update the score field when these checked radio buttons are unchecked later.

HTML:

 <input class="calc_1" name="1" id="sec_125" type="radio" value="4">
 <input class="calc_2" name="1" id="sec_126" type="radio" value="1">
 <input class="calc_3" name="1" id="sec_127" type="radio" value="2">
 <input class="calc_4" name="1" id="sec_128" type="radio" value="3">
 <input class="calc_1" name="2" id="sec_129" type="radio" value="4">
 <input class="calc_2" name="2" id="sec_130" type="radio" value="1">
 <input class="calc_3" name="2" id="sec_131" type="radio" value="2">
 <input class="calc_4" name="2" id="sec_132" type="radio" value="3">
 <input readonly name="score_1" id="score_1" type="text" value="">
 <input readonly name="score_2" id="score_2" type="text" value="">

JS:

function getTotalScore(sec){
   var total = 0; 
   jQuery(".calc_"+sec+":checked").each(function() {
    total += parseInt(jQuery(this).val(),10);
    count++;
});

 jQuery("#score_"+sec).val(total);

}

jQuery(document).ready(function(){
    jQuery(".calc_1").change(function() {
      getTotalScore("1")
    });
   jQuery(".calc_2").change(function() {
    getTotalScore("2")
   });
});

Currently, my code updates score_1 and score_2 fields when a radio button from class “calc_1” and “calc_2” respectively is checked but doesn’t change these values when the user selects another radio button from the same input group.

For example, If the user selects sec_125 and sec_130 first, score_1 should be 4 and score_2 should be 1. If the user later decides to select sec_126, score_1 still remains 4 when it should actually be 0.

How can I write a JS function that will update the score fields immediately after a previously checked radio button is now unchecked?

Thanks!

Answer 1

Recalculate everything after each change:

jQuery(document).ready(function(){
    jQuery(".calc_1, .calc_2").change(function() {
      calculateScore("1")
      calculateScore("2")
    });
});