Skip to main content
se eliminaron 54 caracteres en el cuerpo
Origen Enlace

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.introducir la descripción de la imagen aquí Lo he intentado de varias formas y no entiendo cómo hacerlo. si algún experto puede ayudarme, estoy inmensamente agradecido.

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.introducir la descripción de la imagen aquí Lo he intentado de varias formas y no entiendo cómo hacerlo. si algún experto puede ayudarme, estoy inmensamente agradecido.

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.

se eliminaron 1047 caracteres en el cuerpo
Origen Enlace
function comprobar(target) {
  var textInput = document.getElementById("name" + target.id);
  if (target.checked) {
    textInput.value = "1";
  } else {
    textInput.value = " ";
  }
}

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
    var linha = linhas[i];
  linha.addEventListener("click", function(){
    //Adicionar ao atual
        selLinha(this, true); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
    });
}

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function comprobar(target) {
  var textInput = document.getElementById("name" + target.id);
  if (target.checked) {
    textInput.value = "1";
  } else {
    textInput.value = " ";
  }
}


// FUNÇÃO
$(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'));  
}

var btnVisualizar = document.getElementById("enviar");

btnVisualizar.addEventListener("click", function(){
btnVisualizar = window.open("https://api.whatsapp.com/send?phone=529851153745&text='Solicito:   '" + totalParts );
}
<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="22"precio="12.3" class="mis-checkboxes" />
                                                    <label for="CLASE1"></label>
                                                </td>
                        <td>
                        <td>
                            <input  type="checkbox" id="CLASE2" name="CLASE1" onChange="comprobar(this);" tu-attr-precio="22" class="mis-checkboxes" />
                <input type="text" id="name.php1" onclick="this.select();" class="mis-adicionales" />
                               <label for="CLASE1"></label>
                </td>
                        <td>
        </td>
                                            <input  type="checkbox" id="CLASE2" <td>
name="CLASE2" onChange="comprobar(this);" tu-attr-precio="3.5" class="mis-checkboxes" />
                                                <input type="text" id="CLASE1" onclick="this.select();" <label for="CLASE2"></>label>
                                                </td>
                        <td>
                                                    <input type="text" id="CLASE2"id="name.php2" onclick="this.select();" class="mis-adicionales" />
                                                </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>
                                        <td style="aling-text: center" class="cheq" ><outputcenter"><output type="text" readonly id="total" placeholder="0.00" /></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

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

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
    var linha = linhas[i];
  linha.addEventListener("click", function(){
    //Adicionar ao atual
        selLinha(this, true); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
    });
}

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function comprobar(target) {
  var textInput = document.getElementById("name" + target.id);
  if (target.checked) {
    textInput.value = "1";
  } else {
    textInput.value = " ";
  }
}


// FUNÇÃO
$(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'));  
}

var btnVisualizar = document.getElementById("enviar");

btnVisualizar.addEventListener("click", function(){
btnVisualizar = window.open("https://api.whatsapp.com/send?phone=529851153745&text='Solicito:   '" + totalParts );
}
<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="22" class="mis-checkboxes" />
                                                    <label for="CLASE1"></label>
                                                </td>
                        <td>
                                                    <input  type="checkbox" id="CLASE2" name="CLASE1" onChange="comprobar(this);" tu-attr-precio="22" class="mis-checkboxes" />
                                                    <label for="CLASE1"></label>
                                                </td>
                                                <td>
                                                    <input type="text" id="CLASE1" onclick="this.select();" />
                                                </td>
                        <td>
                                                    <input type="text" id="CLASE2" onclick="this.select();" />
                                                </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>
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>
se añadieron 303 caracteres en el cuerpo
Origen Enlace
function comprobar(target) {
  var textInput = document.getElementById("name" + target.id);
  if (target.checked) {
    textInput.value = "1";
  } else {
    textInput.value = " ";
  }
}

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
    var linha = linhas[i];
  linha.addEventListener("click", function(){
    //Adicionar ao atual
        selLinha(this, true); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
    });
}

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
 
function selLinhacomprobar(linha, multiplostarget){
  if(!multiplos){
    var linhastextInput = linha.parentElementdocument.getElementsByTagNamegetElementById("tr""name" + target.id);
       if for(var i = 0; i < linhastarget.length; i++checked) {
       textInput.value = "1";
  var linha_} =else linhas[i];{
     textInput.value = " ";
  }
}


// linha_.classListFUNÇÃO
$(document).removeready("selecionado"function();    {
      
 $(document).on('click keyup','.mis-checkboxes,.mis-adicionales',function() }{
  }
  linha.classList.togglecalcular("selecionado");
 });

});
/**
Exemplo defunction comocalcular() capturar{
 os dados
**/
var btnVisualizartot = document.getElementById$("visualizarDados"'#total');
 
btnVisualizar  tot.addEventListenerval("click",0);
  $('.mis-checkboxes,.mis-adicionales').each(function() {
    var selecionados = tabelaif($(this).getElementsByClassNamehasClass("selecionado"'mis-checkboxes');) {
  //Verificar se eestá selecionado
  iftot.val(selecionados($(this).length < 1is(':checked'){
   ? alertparseFloat("Por favor seleccione$(this).attr('tu-attr-precio')) al: menos0) una+ líneaparseFloat(tot."val()));
    return false;
  }
  }
  var dados =else "";{
   var total=0;
  
   fortot.val(varparseFloat(tot.val()) i+ =(isNaN(parseFloat($(this).val())) 0;? i0 <: selecionadosparseFloat($(this).length; i++val(){)));
    var}
 selecionado = selecionados[i];});
   var selecionadototalParts = selecionadoparseFloat(tot.getElementsByTagNameval("td")).toFixed(2).split('.');
    dados +=tot.val('$' "+ totalParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + selecionado[0]'.innerHTML' + " -(totalParts.length "> +1 selecionado[1].innerHTML? +totalParts[1] ": -'00')); Precio: "
}

var +btnVisualizar selecionado[3]= document.innerHTMLgetElementById("enviar");

btnVisualizar.addEventListener("click", +"\n";function(){
btnVisualizar = window.open("https://api.whatsapp.com/send?phone=529851153745&text='Solicito:  total +='" (selecionado[3].innerHTML+ *totalParts selecionado[1].innerHTML);
  }
<div class="inner3">
                    <div class="wrapper style1">
                        <div class="content">
                                
                                <div class="table-wrapper">
                                    <table class="alt1" id="minhaTabela">class="alt1">
                                        <tbody>
     <?php 
                                            <tr>
                $conn = "SELECT * FROM produtos where emp_id = {$cat_id}";
                       <td>NOME</td>
                                     $resultado_produto = mysqli_query($con,$conn) or die("Erro ao retornar dados");
    <td>
                                                    <input  type="checkbox" id="CLASE1" name="CLASE1" whileonChange="comprobar($rowthis);" =tu-attr-precio="22" $resultado_produtoclass="mis->fetch_array(MYSQLI_ASSOC))checkboxes" {/>
                                                    <label for="CLASE1"></label>
                                                </td>
            $prd_id = $row['prd_id'];          <td>
                                                    <input  type="checkbox" id="CLASE2" name="CLASE1" onChange="comprobar(this);" tu-attr-precio="22" class="mis-checkboxes" ?/>
                                                    <label for="CLASE1"></label>
                                                </td>
                                            <tr>    <td>
                                                <td class="wabi"><?php echo $row['prd_nome'];?><p style="font-size:<input 11px"><?phptype="text" echoid="CLASE1" $row['descricao'];?><onclick="this.select();" /p>>
                                                </td>
                        <td>
                        <td style="display:none;" class="precio" id="precio<?php echo $row['prd_precio'];?>" ><                      <input type="text" id="CLASE2" onclick="this.select();" /td>>
                                                <td class="cheq"></td>
                                            </tr>
        <input type="checkbox" id="<?php echo $row['prd_id'];?>" name="<?php echo $row['prd_id'];?>" onChange="comprobar(this);" value="<?php echo $row['prd_precio'];                         <?>"php onclick="actualizarValor(this.checked,} this.value);"} /?>
                                         
            <label for="<?php echo $row['prd_id'];?>"><                         </label>tbody>
                                    </table>
                                </td>div>
                                 
                <td class="cheq">                  <div class="table-wrapper">
                                    <table class="alt1">
               <input class="qtd" type="text" id="name<?php echo $row['prd_id'];?>" onclick="this.select();" />
                  <tbody>
                              </td>          <tr  style="font-size: 23px">
                                        <td class="wabi">TOTAL A PAGAR</td>
 <                                       <td class="cheq"></tr>td>
                                        <td style="aling-text: center" class="cheq" <?php><output }type="text" }readonly ?>id="total" placeholder="0.00" /></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

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

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
    var linha = linhas[i];
  linha.addEventListener("click", function(){
    //Adicionar ao atual
        selLinha(this, true); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
    });
}

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
 
function selLinha(linha, multiplos){
  if(!multiplos){
    var linhas = linha.parentElement.getElementsByTagName("tr");
        for(var i = 0; i < linhas.length; i++){
           var linha_ = linhas[i];
           linha_.classList.remove("selecionado");    
        }
  }
  linha.classList.toggle("selecionado");
}


/**
Exemplo de como capturar os dados
**/
var btnVisualizar = document.getElementById("visualizarDados");
 
btnVisualizar.addEventListener("click", function(){
    var selecionados = tabela.getElementsByClassName("selecionado");
  //Verificar se eestá selecionado
  if(selecionados.length < 1){
    alert("Por favor seleccione al menos una línea.");
    return false;
  }
  
  var dados = "";
   var total=0;
  
   for(var i = 0; i < selecionados.length; i++){
    var selecionado = selecionados[i];
    selecionado = selecionado.getElementsByTagName("td");
    dados += " / " + selecionado[0].innerHTML + " - " + selecionado[1].innerHTML + " - Precio: " + selecionado[3].innerHTML +"\n";
    total += (selecionado[3].innerHTML * selecionado[1].innerHTML);
  }
<div class="inner3">
                    <div class="wrapper style1">
                        <div class="content">
                                
                                <div class="table-wrapper">
                                    <table class="alt1" id="minhaTabela">
                                        <tbody>
     <?php
                                                            $conn = "SELECT * FROM produtos where emp_id = {$cat_id}";
                                                            $resultado_produto = mysqli_query($con,$conn) or die("Erro ao retornar dados");

                                                        while($row = $resultado_produto->fetch_array(MYSQLI_ASSOC)) { 
                                                            $prd_id = $row['prd_id'];
                                                            ?>
                                                            
                                            <tr>
                                                <td class="wabi"><?php echo $row['prd_nome'];?><p style="font-size: 11px"><?php echo $row['descricao'];?></p>
                                                </td>
                                                <td style="display:none;" class="precio" id="precio<?php echo $row['prd_precio'];?>" ></td>
                                                <td class="cheq">
                                                    <input type="checkbox" id="<?php echo $row['prd_id'];?>" name="<?php echo $row['prd_id'];?>" onChange="comprobar(this);" value="<?php echo $row['prd_precio'];?>" onclick="actualizarValor(this.checked, this.value);" />
                                                    <label for="<?php echo $row['prd_id'];?>"></label>
                                                </td>
                                                <td class="cheq">
                                                    <input class="qtd" type="text" id="name<?php echo $row['prd_id'];?>" onclick="this.select();" />
                                                </td>
                                            </tr>
                                            <?php } } ?>
                                        
                                        </tbody>
                                    </table>
                                </div>
function comprobar(target) {
  var textInput = document.getElementById("name" + target.id);
  if (target.checked) {
    textInput.value = "1";
  } else {
    textInput.value = " ";
  }
}

var tabela = document.getElementById("minhaTabela");
var linhas = tabela.getElementsByTagName("tr");

for(var i = 0; i < linhas.length; i++){
    var linha = linhas[i];
  linha.addEventListener("click", function(){
    //Adicionar ao atual
        selLinha(this, true); //Selecione apenas um
                //selLinha(this, true); //Selecione quantos quiser
    });
}

/**
Caso passe true, você pode selecionar multiplas linhas.
Caso passe false, você só pode selecionar uma linha por vez.
**/
function comprobar(target) {
  var textInput = document.getElementById("name" + target.id);
  if (target.checked) {
    textInput.value = "1";
  } else {
    textInput.value = " ";
  }
}


// FUNÇÃO
$(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'));  
}

var btnVisualizar = document.getElementById("enviar");

btnVisualizar.addEventListener("click", function(){
btnVisualizar = window.open("https://api.whatsapp.com/send?phone=529851153745&text='Solicito:   '" + totalParts );
}
<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="22" class="mis-checkboxes" />
                                                    <label for="CLASE1"></label>
                                                </td>
                        <td>
                                                    <input  type="checkbox" id="CLASE2" name="CLASE1" onChange="comprobar(this);" tu-attr-precio="22" class="mis-checkboxes" />
                                                    <label for="CLASE1"></label>
                                                </td>
                                                <td>
                                                    <input type="text" id="CLASE1" onclick="this.select();" />
                                                </td>
                        <td>
                                                    <input type="text" id="CLASE2" onclick="this.select();" />
                                                </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>
título editado
Enlace
Loading
Origen Enlace
Loading