Comment puis-je calculer la somme des valeurs des boutons radio à l'aide de jQuery?

J'essaye de créer un formulaire avec beaucoup de groupes contenant beaucoup de boutons radio. Lorsque l'utilisateur sélectionne un bouton, je voudrais calculer la somme de chaque valeur de bouton radio sélectionnée et montrer cette somme à l'utilisateur.Comment puis-je calculer la somme des valeurs des boutons radio à l'aide de jQuery?

J'ai trouvé un plugin pour jQuery qui fera le calcul, ce plugin utilise l'attribut name des boutons à calculer. Par exemple, il va additionner les valeurs de tous les boutons qui ont le nom sum. Jusqu'à présent, j'ai essayé deux façons de configurer ceci: dans la première méthode, je crée un champ caché pour chaque groupe pour contenir la somme des valeurs sélectionnées à l'intérieur, ce champ caché obtient la valeur mais le problème est que la valeur totale ne sera pas mise à jour lorsqu'un utilisateur sélectionne un bouton. Mon code ressemble à ceci:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
     <title>Untitled Document</title> 
     <script src="jquery.js" type="text/javascript"> 
     </script> 
     <script src="calc.js" type="text/javascript"> 
     </script> 
     <script src="calc_f.js" type="text/javascript"> 
     </script> 
     <script type="text/javascript"> 
      function DisplayPrice(price){ 
       $('#spn_Price').val(price); 
      } 
     </script> 
    </head> 
    <body> 
     <form id="form1" runat="server"> 
      <input type="hidden" id="spn_Price" name="sum" value=""> 
      <br> 
      <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);"> 
      <br> 
      <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);"> 
      <br> 
      <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly"> 
     </form> 
    </body> 
</html>

Dans ce code, la balise d'entrée avec le nom totalSum est où la valeur sera mise à jour, mais il ne sera pas mise à jour lors de la modification des boutons.

Comme je l'ai déjà dit, la raison pour laquelle j'utilise un champ caché est de contenir le sous-total de chaque groupe. Il porte le nom sum, ce qui indique au plugin qu'il doit être ajouté aux autres. Je ne sais pas si c'est la bonne façon de le faire, j'ai essayé de changer l'attribut de nom des boutons lorsque l'utilisateur les clique sur sum mais cela n'a pas fonctionné non plus!

est l'adresse de plugin ici: http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

Comment puis-je faire cela?

Source

2009-08-24 datisdesign

Plugin schmugin. Débarrassez-vous de votre onclick et essayez ceci:

$("input[type=radio]").click(function() { 
    var total = 0; 
    $("input[type=radio]:checked").each(function() { 
     total += parseFloat($(this).val()); 
    }); 

    $("#totalSum").val(total); 
});

Source

2009-08-24 21:03:38

+1. C'est pourquoi il est important d'apprendre les bases nues d'une langue avant d'apprendre un cadre. Aucune raison d'apporter un plugin à ce problème particulier. –

Merci, mais ça ne marche pas! – datisdesign

Désolé, son fonctionnement, mon mauvais! :) – datisdesign

Untitled Document

<script type="text/javascript"> 
     function DisplayPrice(price){ 
      var val1 = 0; 
      for(i = 0; i < document.form1.price.length; i++){ 
       if(document.form1.price[i].checked == true){ 
        val1 = document.form1.price[i].value; 
       } 
      } 

      var val2 = 0; 
      for(i = 0; i < document.form2.price2.length; i++){ 
       if(document.form2.price2[i].checked == true){ 
        val2 = document.form2.price2[i].value; 
       } 
      } 

      var sum=parseInt(val1) + parseInt(val2); 
      document.getElementById('totalSum').value=sum; 
     } 
    </script> 
</head> 
<body> 
    Choose a number:<br> 
    <form name="form1" id="form1" runat="server"> 
     <br> 
     <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159 
     <br> 
     <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259 
     <br> 
    </form> 

    Choose another number:<br> 
    <form name="form2" id="form2" runat="server"> 
     <br> 
     <input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345 
     <br> 
     <input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87 
     <br> 
    </form> 
    <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly"> 


</body>

Le code ci-dessus résumera les valeurs dinamically vérifiés des deux groupes. parseInt va convertir en entiers. Utilisez parseFloat sinon.

Source

2009-08-24 21:32:02

a travaillé pour moi, merci et bon travail –

Comment puis-je calculer la somme des valeurs des boutons radio à l'aide de jQuery?

Répondre

Questions connexes