Résolution de problèmes, boutons radio ajoutant des valeurs dans la zone de texte. Amélioration de la solution

Question

J'ai une série de boutons radio (rdoGroup1, rdoGroup2, rdoGroup3) et trois zones de texte à la fin de la table dans laquelle chaque zone de texte txtTotalC comptera la quantité de boutons radio avec la valeur C ont été sélectionnés, txtTotalB comptera le montant des boutons radio avec la valeur B, txtTotalA comptera la quantité de boutons radio avec la valeur A.

Pour le moment, je ne peux mettre en place qu'une fonction standar javascript (voir le code en bas) qui deviendra très grande car j'ai 11 groupes de radio et je traite chacun séparément.

Je me demandais s'il y avait un moyen le plus rapide de le faire sur jquery.

<table> 
    <tr> 
    <td><input type="radio" name="rdoGroup1" value="C"/></td> 
    <td><input type="radio" name="rdoGroup1" value="B"/></td> 
    <td><input type="radio" name="rdoGroup1" value="A"/></td> 
    </tr> 
    <tr> 
    <td><input type="radio" name="rdoGroup2" value="C"/></td> 
    <td><input type="radio" name="rdoGroup2" value="B"/></td> 
    <td><input type="radio" name="rdoGroup2" value="A"/></td> 
    </tr> 
    <tr> 
    <td><input type="radio" name="rdoGroup3" value="C"/></td> 
    <td><input type="radio" name="rdoGroup3" value="B"/></td> 
    <td><input type="radio" name="rdoGroup3" value="A"/></td> 
    </tr> 
    <tr> 
    <td><input type="text" id="txtTotalC"></td> 
    <td><input type="text" id="txtTotalB"></td> 
    <td><input type="text" id="txtTotalA"></td> 
    </tr> 
</table> 


var rdoGroup1A, rdoGroup1B, rdoGroup1C = 0; 
function radioGroupSelected(rdoControl) { 

    if (rdoControl.name == "rdoGroup1") { 

     if (rdoControl.checked.value == "C") { 
      txtTotalC.value = txtTotalC.value + 1; 
       if (rdoGroup1B== 1) { 
        rdoGroup1B-= 1; 
       } 
       if (rdoGroup1A== 1) { 
        rdoGroup1A -= 1; 
       } 
      rdoGroup1C += 1; 
     } 
     if (rdoControl.checked.value == "B") { 
      txtTotalB.value = txtTotalB.value + 1; 
       if (rdoGroup1C== 1) { 
        rdoGroup1C -= 1; 
       } 
       if (rdoGroup1A == 1) { 
        rdoGroup1A -= 1; 
       } 
      rdoGroup1B += 1; 
     } 
     if (rdoControl.checked.value == "A") { 
      txtTotalA.value = txtTotalB.value + 1; 
       if (rdoGroup1B == 1) { 
        rdoGroup1B -= 1; 
       } 
       if (rdoGroup1C == 1) { 
        rdoGroup1C -= 1; 
       } 
      rdoGroup1A += 1; 
     } 

    } 

} 

Answer 1

Vous pouvez faire quelque chose comme ceci:

$("table").delegate(":radio", "change", function() { 
    var radios = $(this).closest("table").find(":radio:checked"); 
    $.each(["A", "B", "C"], function(i, l) { 
     $("#txtTotal" + l).val(radios.filter("[value='"+l+"']").length); 
    }); 
}); 

You can test it out here. L'approche de base est qu'au lieu de suivre les valeurs, il suffit de les additionner à chaque fois, en gardant les choses beaucoup plus simples.

Comment les travaux ci-dessus:

• Joindre un seul gestionnaire d'événement pour tous les boutons radio dans la <table> via .delegate()
• Lorsque tout changement de bouton radio:
  • Obtenez tous les boutons radio actuellement vérifiés
  • Parcourez toutes les valeurs possibles ("A", "B", "C", un tableau ci-dessus) ... ou vous pourriez le déplier en 3 lignes, le $.each() facilite l'expa sd plus tard).
  • Pour chaque valeur possible, définissez sa valeur de boîte totale, par ex. #txtTotalA pour le premier, au .length (nombre d'éléments) correspondant en utilisant .filter() pour obtenir ceux qui sont cochés, avec cette valeur.

Si vous avez plusieurs tables, vous pouvez toujours utiliser ce qui précède, il suffit de changer les boîtes au total avec les ID aux classes, et les trouver de cette façon, par exemple, vous utiliseriez $(this).closest("table").find(".txtTotal"+l) au lieu de $("#txtTotal" + l) (mise en cache le $(this).closest("table") pour la vitesse aiderait).