1

Necesito aplicar 5% de descuento al valor de un input ingresado mediante un checkbox, pero dependiendo la posicion del input

Este es mi input donde pongo un precio

 <input type="number" id="precio" name="precio[]" class="Precio" step='0.01'>

y este en el checkbox

<input id="{{$ticket->id}}"class=" Descuento" name="descuento[{{$j['sku']}}]" type="checkbox" value="si">

Lo que necesito es que cuando presione el checkbox segun la posicion del input precio, se le aplique el descuento fijo del 5%

Ejemplo: Si en mi primer input ingrese 100 y le doy al checbox se cambie a 95 que seria el resultado del precio -5%, y asi con cada posicion

este es mi script por ahora, donde realizo operaciones en tiempo real,

    <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=parseFloat(precio*0.95);
        // $('.Descuento').change(function(){ 
        //     $('.Descuento').each(function(){
        //         if($('.Descuento')[index].checked==true){
        //             $('.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);
}

function descuento() {
    let total = 0; 
        $('.Descuento').change(function(){ 
            $('.Descuento').each(function(indexa){
                if($('.Descuento')[indexa].checked==true){
                    let pre =  parseInt($('[name="precio[]"]')[indexa].value);
                    let porcentaje=parseFloat(pre*0.95); 
                    $('.Precio').val(porcentaje)[indexa];
                    sumar();
                }
            });
        });
}

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

introducir la descripción de la imagen aquí

1
  • 1
    Listo, lo agregue.
    – Iván
    el 18 may. 2021 a las 17:08

1 respuesta 1

1

No necesitas una función aparte para calcular los descuentos, dentro de sumar() puedes realizar las operaciones necesarias y también se va a ejecutar cuando se marque o desmarque un checkbox.

Importante: Si aplicas el descuento directamente al campo <input type="number" id="precio" name="precio[]" class="Precio" step='0.01'> la siguiente vez que se marque el checkbox se aplicará otro 5% de descuento adicional.

Para aplicar el descuento solo una vez es necesario guardar los precios originales en un arreglo y, si el campo precio se modifica, actualizar el arreglo, desmarcando el checkbox correspondiente para poder teclear y no aplique el descuento hasta que se vuelva a marcar.

let clase = '.total';
// Guardar precios originales
let precios = [];
    function sumar() {
        let total = 0; 
    
        $('.Precio').each(function(index) {
            let cantidad =  parseInt($('[name="totalProducto[]"]')[index].value) || 0;
            // Obtener precio original (o modificado al teclear)
            let precio = parseFloat(precios[index]) || 0;
            // ¿Tiene descuento?
            // Si el checkbox está marcado, aplicar descuento
            let desc = ($('.Descuento')[index].checked) ? 0.95 : 1;

            // No modifiques el campo de precio, solo calcula el descuento
            let precioFinal = precio * desc;

            // Actualizar precio en campo
            $(this).val(precioFinal);

            total += cantidad * precioFinal
        });
    
        if(total > 0) {
            $('#showtotal').show();
        } else {
            $('#showtotal').hide();
        }
        // Permitir solo dos decimales
        total = total.toFixed(2);
        $(clase).val('$ ' + total);
        $('#totalSpan').text('$ ' + total);
    }
    
    function actualizarPrecio() {
        // Obtener posición del elemento que se modificó
        let index = $('.Precio').index($(this));
        // Desmarcar checkbox para poder modificar
        $('.Descuento')[index].checked = false;
        // Actualizar precio por posición
        precios[index] = $(this).val();
        // Realizar cálculos
        sumar();
    }
    
    $( document ).ready(function() {
        // Guardar precios originales
        $('.Precio').each((index, item) => {
            precios.push($(item).val());
        });
        $('[name="totalProducto[]"]').on('input', sumar);
        // Al modificar un precio se debe actualizar en originales
        $('.Precio').on('input', actualizarPrecio);
        // Escuchar cambios en checkboxes
        $('.Descuento').on('change', sumar);
        sumar();
    });
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <input type="number" name="totalProducto[]" value="1" step="1">
    <input type="number" class="Precio" name="precio[]" value="100" step="0.01">
    <input type="checkbox" class="Descuento" name="descuento[]" value="si">
</div>
<div>
    <input type="number" name="totalProducto[]" value="1" step="1">
    <input type="number" class="Precio" name="precio[]" value="200" step="0.01">
    <input type="checkbox" class="Descuento" name="descuento[]" value="si">
</div>
<div>
    <input type="number" name="totalProducto[]" value="1" step="1">
    <input type="number" class="Precio" name="precio[]" value="300" step="0.01">
    <input type="checkbox" class="Descuento" name="descuento[]" value="si">
</div>
<div>
    <input type="text" class="total" name="total" value="0" readonly>
    <span id="totalSpan"></span>
</div>

7
  • Igualo lo que necesito es que se actualice el input con el nuevo valor, en el backend ya hago la operacion de guardarlo si tiene el descuento aplicado, lo que necesito en mostrarlo en tiempo real,
    – Iván
    el 18 may. 2021 a las 17:41
  • let desc = ($('.Descuento')[index].checked)) ? 0.95 : 1; esta linea me esta fallando, no se ejecuta nada,
    – Iván
    el 18 may. 2021 a las 17:48
  • No me esta funcionando,, estoy revisando todo
    – Iván
    el 18 may. 2021 a las 17:57
  • 1
    Precisamente es lo que te comenté en la pregunta, pero dices que necesitas que se vea el cambio al marcar los checkboxes. Hay ver cómo guardar los precios originales y actualizar cuando el usuario modifique el campo.
    – Triby
    el 18 may. 2021 a las 18:23
  • 1
    @Iván, listo, revisa la respuesta actualizada.
    – Triby
    el 18 may. 2021 a las 18:41

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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