Comment déclencher un événement juste après la désactivation d'un bouton radio à l'aide de jQuery / JavaScript - javascript, jquery

J'ai actuellement une fonction JS qui calculescores basés sur les valeurs des boutons radio cochés. Je veux que ma fonction mette à jour le champ de score lorsque ces boutons radio cochés sont décochés plus tard.

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")
});
});

Actuellement, mon code met à jour score_1 et score_2champs lorsqu'un bouton radio de la classe "calc_1" et "calc_2" respectivement est coché mais ne modifie pas ces valeurs lorsque l'utilisateur sélectionne un autre bouton radio dans le même groupe d'entrée.

Par exemple, si l'utilisateur sélectionne sec_125 etsec_130 en premier, score_1 doit être 4 et score_2 doit être 1. Si l'utilisateur décide plus tard de sélectionner sec_126, score_1 reste toujours 4 alors qu'il devrait en fait être 0.

Comment puis-je écrire une fonction JS qui mettra à jour les champs de score immédiatement après qu'un bouton radio précédemment coché est maintenant décoché?

Merci!

Réponses:

Recalculez tout après chaque modification:

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

Vous devriez lier change événement sur tous les boutons radio

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

Essaye ça

$(document).ready(function(){
$(".calc_1, .calc_2").on("click",function() {
if( ! $(this).is(":checked"){ // Condition When Unchecked
calculateScore("1");
calculateScore("2");
}
});
});