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

Je suis en train de créer un formulaire avec de nombreux groupes contenant de nombreux boutons radio. Lorsque l'utilisateur sélectionne un bouton, je voudrais calculer la somme de chaque bouton radio de la valeur et de montrer cette somme à l'utilisateur.

J'ai trouvé un plugin pour jQuery qui va faire le calcul, ce plugin utilise l'attribut name de l'boutons à calculer. Par exemple, il sera la somme des valeurs de tous les boutons qui ont le nom sum.

Jusqu'à présent, j'ai essayé les deux façons de mettre cela en place: dans la première méthode, j'ai créer un champ caché pour chaque groupe 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 lorsque l'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 input avec le nom totalSum est où la valeur sera mise à jour, mais il ne sera pas mise à jour lors de la modification de l'boutons.

Comme je l'ai dit avant, la raison pour laquelle j'utilise un champ caché est de tenir chaque groupe de sous-total. Il a le nom de sum, ce qui indique au plugin qu'il devrait être ajouté à d'autres.

Je ne sais pas si c'est la bonne façon de le faire, j'ai essayé de changer le nom de l'attribut de touches lors du clic de l'utilisateur à sum mais cela ne fonctionne pas!!!!

Voici plugin adresse : http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

Comment puis-je faire cela ?

OriginalL'auteur datisdesign | 2009-08-24

  1. 21

    Plugin schmugin. Débarrassez-vous de vos onclick et essayez ce qui suit:

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

    $("#totalSum").val(total);
});
    +1. C'est pourquoi il est important d'apprendre à le nu rudiments de la langue avant d'apprendre un framework. Aucune raison d'apporter un plugin dans ce problème particulier.
    Merci, mais ça ne fonctionne pas !
    Désolé, son travail, mon mauvais ! 🙂
    Comment spécifier un nom de formulaire en $("input[type=radio]").click(function() { de sorte qu'il ne prend que les boutons de la radio dans une forme particulière et pas tous les sur la page?
    $("#id_of_your_form input[type=radio]").click...

    OriginalL'auteur Andy Gaskell

  2. 2

    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 va dinamically somme les valeurs contrôlées dans les deux groupes.
    parseInt seront convertis en nombres entiers. Utilisation parseFloat autrement.

    a fonctionné pour moi, merci et bon travail

    OriginalL'auteur