jQuery ajouter plusieurs zones de texte

Question

Je me demande si quelqu'un pourrait m'aider.

J'ai une page Web où il y a des zones de texte (quantité dynamique, pourrait être 3, pourrait être 30) et chacun un utilisateur peut entrer un nombre et j'ai un compte total en bas.

À l'heure actuelle, j'ai ceci:

$('input.qty').change(function() { 
// Get the current total value 
var total = $('#total'); 
// Update it with the changed input's value 
total.val(parseInt(total.val()) + parseInt($(this).val())); 
}); 

Exemple HTML:

<td><input type="text" class="qty" value="0" /></td> 
<td><input type="text" class="qty" value="0" /></td> 
<td><input type="text" class="qty" value="0" /></td> 
<td><input type="text" id="total" value="0" /></td> 

qui ajoute bien la première fois, mais quand vous commencez à changer les valeurs, il ajoute simplement le nouveau montant au total plutôt que en ajoutant toutes les boîtes.

Comment puis-je trier cela? Peut-être utiliser le chaque attr en quelque sorte?

Answer 1

Vous pouvez parcourir tous en utilisant un .each() et les résumer, comme ceci:

$('input.qty').change(function() { 
    var sum = 0; 
    $('input.qty').each(function() { sum += parseInt(this.value, 10); }); 
    $('#total').val(sum); 
}); 

You can give it a try here, si vous voulez qu'il CALC sur chaque pression de touche, puis utilisez .keyup() au lieu de .change(), like this.