Tengo un formulario de pedido con aproximadamente 30 campos de texto que contienen valores numéricos. Me gustaría calcular la suma de todos esos valores en blur.jQuery calcule la suma de valores en todos los campos de texto
Sé cómo seleccionar todos los campos de texto pero no cómo recorrerlos y sumar todos sus valores?
$(document).ready(function(){
$(".price").blur(function() {
//loop and add up every value from $(".price").val()
})
});
$('.price').blur(function() {
var sum = 0;
$('.price').each(function() {
sum += Number($(this).val());
});
// here, you have your sum
});
Thx @MarkoDumic pero ¿y si quiero algo así como subtotales (cantidad * precio) luego cala el gran rotal! –
Para una solución un poco más elegante, puede usar Array.prototype.reduce: http://stackoverflow.com/a/37466639/1988326 –
Utilice esta función:
$(".price").each(function(){
total_price += parseInt($(this).val());
});
El precio no siempre es entero. –
Creo que querrás 'parseFloat()' – alex
Esto debería solucionarlo:
var total = 0;
$(".price").each(function(){
total += $(this).val() * 1;
});
Esto concatenará cadenas devueltas desde .val(). –
Una sugerencia de un usuario de Anon es usar lo siguiente: 'var total = 0; $ (". Price"). Each (function() { total + = $ (this) .val() * 1; }); ' – Fluffeh
$(".price").each(function(){
total_price += parseFloat($(this).val());
});
favor trate como Thi s ...
No estoy seguro de que quiera esto:' "2 apples" + "3 naranjas" => 5' –
Tengo un formulario de pedido con aproximadamente 30 campos de texto ** que contienen valores numéricos. ** – JSobell
No estoy seguro de por qué usted, Marko, pensaría que su método es para algo más que agregar valores. –
Una función más genérica de copiar/pegar para su proyecto.
sumjq = function(selector) {
var sum = 0;
$(selector).each(function() {
sum += Number($(this).text());
});
return sum;
}
console.log(sumjq('.price'));
Creo que te refieres a '.val()' y no a '.text()' –
@PeterMeth parece que depende de http://stackoverflow.com/questions/807867/difference-between-val-and-text – ubershmekel
De manera similar a lo largo de las líneas de estas respuestas escritas como un plugin:
$.fn.sum = function() {
var sum = 0;
this.each(function() {
sum += 1*($(this).val());
});
return sum;
};
Para el registro 1 * x es más rápido que el número (x) en Chrome
$('.price').blur(function() {
var sum = 0;
$('.price').each(function() {
if($(this).val()!="")
{
sum += parseFloat($(this).val());
}
});
alert(sum);
});
Si no necesita soporte IE 8 entonces puedes usar el método nativo Javascript Array.prototype.reduce(). Usted tendrá que convertir su objeto jQuery en una matriz primero:
var sum = $('.price').toArray().reduce(function(sum,element) {
return sum + Number(element.value);
}, 0);
Referencia: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
mirada a cada función jQuery (http://api.jquery.com/each/) – Lazarus
sólo quieren saber una cosa. ¿Por qué a la persona cuestionada publicada anteriormente no se le pregunta sobre el trabajo de investigación que ha realizado? Como la pregunta publicada no muestra ningún trabajo de investigación o lo que intentó al menos, especialmente cuando la pregunta no es muy complicada y compleja. La solución para la pregunta anterior puede ser Google fácilmente todavía ha recibido 22 votos al alza. No hay problemas en los votos al alza, pero ¿qué pasa con el trabajo de investigación? ¿Se les pregunta a los miembros con menos puntos en Stack sobre el trabajo de investigación? –
Posible duplicado de [Suma usando jQuery cada función] (http://stackoverflow.com/questions/4377410/sum-using-jquery-each-function) – KyleMit