1

Necesito hacer unas operaciones en tiempo real con Jquery basados en un checkbox

YA funciona la las operaciones en tiempo real, ahora necesito aplicar mediante un checkbox un descuento al precio ingresado, segun su posición.

 este en el input de cantidad
<input id="totalproducto" class="Cantidad" type="hidden" name="totalProducto[]" value="{{$value->total}}">


 este es el input de precio
<input type="number" id="precio" name="precio[]" class="form-control Precio" step='0.01' value="{{$j['costo_unitario']}}">

Este el checkbox donde necesito aplicar el descuento, en este caso pongo, cuando no se selecciona mando como valor 'no' y en caso contrario 'si'  

<input class="form-check-input" type="hidden" value="no" id="descuento" name="descuento[{{$j['sku']}}]">

<input id="{{$ticket->id}}" style="margin-top: -5px !important;" class="form-check-input Descuento" name="descuento[{{$j['sku']}}]" type="checkbox" value="si">

Este es el input donde muestro el total

  <input id="Total" class="form-control"  type="text" value="0" disabled>

Este es mi codigo Jquery por ahora

    <script type="text/javascript">

    
    function selects(id) {
            var ele = document.getElementById(id);
            for (var i = 0; i < ele.length; i++) {
                if (ele[i].type == 'checkbox')
                    ele[i].checked = true;
            
        }
    }

let clase= '#Total';
$('#showtotal').hide();   
function sumar() {
    let total = 0; 

    $('.Precio').each(function(index) {
        
        let cantidad =  parseInt($('[name="totalProducto[]"]')[index].value) || 0;
        let precio = parseFloat($(this).val()) || 0;
        let porcentaje=precio*0.95;
        $('.Descuento').change(function(){ 
            $('.Descuento').each(function(){
                if($('.Descuento')[index].checked){
                    $('.Precio').val(porcentaje)[index];
                    sumar();
                }
            });
        });
        total += cantidad * precio
    });

    if(total > 0){
        $('#showtotal').show();
    }
    else if(total == 0){
        $('#showtotal').hide();
    }
    $(clase).val('$ '+total);
    $('#totalSpan').text('$ '+total);
}

$( document ).ready(function() {
 

    $('[name="totalProducto[]"]').on('input', sumar);
    $('.Precio').on('input', sumar);
    sumar();
});
</script>

Este es el ejemplo que estoy usando, cuando el resultado deberia ser 3 me da 4,

necesito multiplicar por posicion

1x100=100
1x100=100
total=200

pero si aplico el descuento solo a la posición 0, donde escribí 100, debería aplicar el descuento a uno, y quedar algo asi, y cambiar el input al nuevo valor que se genere

o sea, el valor del input ingresar menos el 5%

1x95=95 (descuento aplicado del 5%)
1x100=100
total=195

Espero puedan ayudarme

introducir la descripción de la imagen aquí

1 respuesta 1

3

El error es que defines cantidad antes de comenzar a realizar los cálculos y después recorres los precios, pero siempre usas el mismo valor en cantidad:

    // Este valor siempre es el mismo, el primero que se obtiene
    var cantidad = $('[name="totalProducto[]"]').val();
    var ele = $('#cantidad').val();
    var pre = $('#precio').val();
        

    $('.Precio').each(function () {
        if ($(this).val() > 0) {
              // Aquí deberías obtener la cantidad correspondiente a la fila
              valor_sumar += parseInt($(this).val()) * cantidad;
        }
    }); 

Solución, recomendaciones y comentarios:

  • No veo la necesidad de usar valor_inicial si los cálculos se van a hacer siempre con todos los campos
  • Crea una función aparte para realizar los cálculos, te permitirá ejecutarla con diferentes eventos
  • Asigna el evento input, que aplica al teclear y también cuando se usan los controles de campos numéricos en el navegador
  • Cuando se cargue el DOM, si aún no se han realizado los cálculos, ejecuta la función sumar()
  • Asegúrate de obtener los valores como números para evitar resultados NaN. Para enteros usa parseInt() y parseFloat() para números que permiten decimales

let clase= '#Total';

function sumar() {
   // Inicializar total
   let total = 0;
   // Recorrer usando índice para asociar cantidad con precio
   $('.Precio').each(function(index) {
       // Obtener cantidad que corresponde al precio (por índice)
       // Se usa .value porque $(selector)[índice] devuelve un elemento HTML
       let cantidad =  parseInt($('[name="totalProducto[]"]')[index].value) || 0;
       // Aquí sí se usa .val() porque es un objeto de jQuery
       // El atributo step permite decimales, forzar valor a número de punto flotante
       let precio = parseFloat($(this).val()) || 0;
       total += cantidad * precio
   });
    $(clase).val(total);
}

$( document ).ready(function() {
    // Aplicar para cualquier cambio en los campos
    $('[name="totalProducto[]"]').on('input', sumar);
    $('.Precio').on('input', sumar);
    // Sumar al cargar del DOM
    sumar();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input class="Cantidad" type="number" name="totalProducto[]" value="2">
    <input type="number" name="precio[]" class="form-control Precio" step='0.01' value="1">
</div>
<div>
    <input class="Cantidad" type="number" name="totalProducto[]" value="1">
    <input type="number" name="precio[]" class="form-control Precio" step='0.01' value="1">
</div>


  <input id="Total" class="form-control"  type="text" value="0" disabled>

3
  • 1
    Muchísimas gracias, tienes mucha razón. Estaba realizando mal la operación. Estoy muy agradecido por tus comentarios y ayuda. Saludos.
    – Iván
    el 11 may. 2021 a las 16:33
  • 1
    Solo como observacion, falto quitar el id duplicado el 11 may. 2021 a las 20:40
  • 1
    Gracias, @JuanRivera, ya lo corregí.
    – Triby
    el 11 may. 2021 a las 20:42

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.