0

Amigos Tengo un código que utilizo para seleccionar una o varias filas de la tabla, multiplicar entre dos de ellas y sumarlas todas para enviar. Pero quiero cambiar el modo de selección para usar "CHECKBOX". El resultado que busco es poder marcar cada casilla de verificación (que automáticamente suma el valor 1 al ingreso de la misma línea), pero con la opción de que la persona cambie esta cantidad, pero abajo, en tiempo real aparece la suma de los precios multiplicada por la cantidad de cada línea. Lo he intentado de varias formas y no entiendo cómo hacerlo. si algún experto puede ayudarme, estoy inmensamente agradecido.

function comprobar(target) {
  var textInput = document.getElementById("name" + target.id);
  if (target.checked) {
    textInput.value = "1";
  } else {
    textInput.value = " ";
  }
}

$(document).ready(function() {
 
 $(document).on('click keyup','.mis-checkboxes,.mis-adicionales',function() {
   calcular();
 });

});

function calcular() {
  var tot = $('#total');
  tot.val(0);
  $('.mis-checkboxes,.mis-adicionales').each(function() {
    if($(this).hasClass('mis-checkboxes')) {
      tot.val(($(this).is(':checked') ? parseFloat($(this).attr('tu-attr-precio')) : 0) + parseFloat(tot.val()));  
    }
    else {
      tot.val(parseFloat(tot.val()) + (isNaN(parseFloat($(this).val())) ? 0 : parseFloat($(this).val())));
    }
  });
  var totalParts = parseFloat(tot.val()).toFixed(2).split('.');
  tot.val('$' + totalParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' +  (totalParts.length > 1 ? totalParts[1] : '00'));  
}
<div class="inner3">
                    <div class="wrapper style1">
                        <div class="content">
                                
                                <div class="table-wrapper">
                                    <table class="alt1">
                                        <tbody>     
                                            <tr>
                                                <td>NOME</td>
                                                <td>
                                                    <input  type="checkbox" id="CLASE1" name="CLASE1" onChange="comprobar(this);" tu-attr-precio="12.3" class="mis-checkboxes" />
                                                    <label for="CLASE1"></label>
                                                </td>
                                                <td>
                                                    <input type="text" id="name.php1" onclick="this.select();" class="mis-adicionales" />
                                                </td>
                        <td>
                                                    <input  type="checkbox" id="CLASE2" name="CLASE2" onChange="comprobar(this);" tu-attr-precio="3.5" class="mis-checkboxes" />
                                                    <label for="CLASE2"></label>
                                                </td>
                        <td>
                                                    <input type="text" id="name.php2" onclick="this.select();" class="mis-adicionales" />
                                                </td>
                                            </tr>
                                        
                                        </tbody>
                                    </table>
                                </div>
                                
                                   <div class="table-wrapper">
                                    <table class="alt1">
                                        <tbody>
                                        <tr  style="font-size: 23px">
                                        <td class="wabi">TOTAL A PAGAR</td>
                                        <td></td>
                                        <td style="aling-text: center"><output type="text" readonly id="total" placeholder="0.00" /></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                        </div>
                    </div>
                </div>

1
  • Por favor edita la pregunta y agrega un código HTML que podamos usar como ejemplo, sin PHP; de otra forma será difícil ayudarte.
    – Triby
    Commented el 20 ago. 2020 a las 15:59

1 respuesta 1

1

En esta propuesta no estoy usando jQuery, porque tenías una mezcla de esa librería y Javascript puro, prefiero esta opción, porque puedes seleccionar elementos casi de la misma forma, simplemente usando document.querySelector() y document.querySelectorAll().

Todo el código está comentado, solo agrego algunas observaciones:

  • Estabas repitiendo ID para checkbox y campo de texto y esa es la principal causa de que no te funcionara como esperabas, al menos en HTML, porque en Javascript intentabas obtener elementos que no existían
  • Agregué el prefijo TEXT- en ID de los campos de texto
  • Eliminé los atributos de eventos en las etiquetas (en línea), porque se considera mala práctica y complica el mantenimiento
  • Definí todas las variables necesarias al inicio del script, porque se van a usar fuera de la función de carga o en más de 1 función
  • Al cargar el DOM se asignan todas las variables y los eventos correspondientes
  • En la función calcular() no estabas considerando que el usuario cambie la cantidad en los campos de texto

// Declarar todas las variables que se usarán 
let tabela,
    linhas,
    checks,
    otros,
    tot,
    cant,
    totalParts;

// Ejecutar hasta que se haya cargado el DOM
document.addEventListener('DOMContentLoaded', function() {
    tabela = document.querySelector('#minhaTabela');
    linhas = tabela.querySelectorAll('tr');
    checks = document.querySelectorAll('.mis-checkboxes');
    otros = document.querySelectorAll('.mis-adicionales');
    cants = document.querySelectorAll('input[type="text"]');
    tot = document.querySelector('#total');
    let btnVisualizar = document.getElementById("enviar");

    // Asignar evento change a checkboxes
    checks.forEach(check => check.addEventListener('change', comprobar));
    // Asignar evento a elementos con clase "mis-adicionales"
    otros.forEach(check => check.addEventListener('change', comprobar));
    // Asignar evento a campos de cantidad
    cants.forEach(item => {
        // Seleccionar contenido al hacer clic en el campo
        item.addEventListener('click', e => e.target.select());
        // Calcular cuando haya cambios
        item.addEventListener('change', calcular);
    });
    // Asignar evento a botón
    btnVisualizar.addEventListener("click", function(){
        // ¿Realmente deseas enviar totalParts u otro valor?
        btnVisualizar = window.open("https://api.whatsapp.com/send?phone=529851153745&text='Solicito:   '" + totalParts);
    });
});

// Recibe evento como parámetro (e)
function comprobar(e) {
    // Obtener campo de cantidad por ID (e.target es el checkbox en que se hizo clic)
    let textInput = document.querySelector(`#TEXT-${e.target.id}`);
    if (e.target.checked) {
        textInput.value = 1;
    } else {
        textInput.value = '';
    }
    calcular();
}

function calcular() {
    // Crear variable para realizar los cálculos
    let calc = 0;
    // Recorrer checkboxes para ver si están marcados
    checks.forEach(check => {
        // Solo si está marcado
        if(check.checked) {
            // Obtener cantidad, o poner en cero si el valor no es numérico o está vacío
            let cantidad = parseInt(document.querySelector(`#TEXT-${check.id}`).value) || 0;
            // Sumar al total: precio * cantidad
            calc += parseFloat(check.getAttribute('tu-attr-precio')) * cantidad;
        }
    });
    // Recorres otros elementos (que no aparecen en la pregunta)
    otros.forEach(item => {
        calc += parseFloat(item.value);
    });
    // Formatear valor
    totalParts = parseFloat(calc).toFixed(2).split('.');
    tot.value = '$' + totalParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' +  (totalParts.length > 1 ? totalParts[1] : '00');  
}
<div class="inner3">
                    <div class="wrapper style1">
                        <div class="content">
                                
                                <div class="table-wrapper">
                                    <table class="alt1" id="minhaTabela">
                                        <tbody>     
                                            <tr>
                                                <td>NOME</td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input  type="checkbox" id="CLASE1" name="CLASE1" tu-attr-precio="22" class="mis-checkboxes" />
                                                    <label for="CLASE1"></label>
                                                </td>
                                                <td>
                                                    <input type="text" id="TEXT-CLASE1">
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <input  type="checkbox" id="CLASE2" name="CLASE1" tu-attr-precio="22" class="mis-checkboxes" />
                                                    <label for="CLASE1"></label>
                                                </td>
                                                <td>
                                                    <input type="text" id="TEXT-CLASE2">
                                                </td>
                                            </tr>
                                            <?php } } ?>
                                        
                                        </tbody>
                                    </table>
                                </div>
                                
                                   <div class="table-wrapper">
                                    <table class="alt1">
                                        <tbody>
                                        <tr  style="font-size: 23px">
                                        <td class="wabi">TOTAL A PAGAR</td>
                                        <td class="cheq"></td>
                                        <td style="aling-text: center" class="cheq" ><output type="text" readonly id="total" placeholder="0.00" /></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                        </div>
                    </div>
                </div>
                <button id="enviar">Enviar</button>

6
  • Es exactamente lo que necesitaba, así que ya voté, muchas gracias por esa ayuda. Dejaste una pregunta de lo que realmente necesitabas enviar, y de hecho sería algo así ... Tengo en la tabla el nombre del producto y necesito enviar el nombre + cantidad multiplicado por el precio (cada producto) y solo después del total. Solicito: Producto 1. $ 00.00 producto 2 $ 00.00 Total $ (totalParts)
    – Sanntos
    Commented el 21 ago. 2020 a las 11:20
  • Además de este detalle de envío de los datos (nombre, precios, cada artículo y cantidad). Una pregunta, este código no funciona en safari, ¿hay alguna razón?
    – Sanntos
    Commented el 21 ago. 2020 a las 11:38
  • Sí, probablemente a Safari no le gustan las funciones flecha item.addEventListener('click', e => e.target.select()); aunque en la referencia dice que sí las soporta, desde la versión 10. Habría que revisar la consola para ver dónde marca el error.
    – Triby
    Commented el 21 ago. 2020 a las 15:21
  • Gracias Triby, si es posible me colabore con la inserción del los datos más. Pero ya soy muy agradecido por tu aportación. Bendiciones amigo
    – Sanntos
    Commented el 21 ago. 2020 a las 17:05
  • Logré hacer funcionar en Safari, ahora me resta los nombres de las categorías e productos.
    – Sanntos
    Commented el 22 ago. 2020 a las 19:37

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.