0

Olá

Preciso fazer um sistema que atualize o preço total conforme os itens vão sendo selecionados, porém não entendo muito de Javascript, então travei na seguinte parte: (HTML)

<input type="checkbox" name="porcoes[]" value="Tilápia" id="porcoes[]" onblur="calcular();">
<input type="number" name="porcoesQnt[]" style="width: 40px; text-align: center;" value="1" id="porcoesQnt[]"  onblur="calcular();">
<label for="tilapia">Tilápia</label>
<input type="number" name="porcoesVlr[]" id="porcoesVlr[]" style="text-align: center; border: none; background-color: white;" value="1.99" onblur="calcular();" readonly><br>

<input type="checkbox" name="porcoes[]" value="Camarão empanado" id="porcoes[]" onblur="calcular();">
<input type="number" name="porcoesQnt[]" style="width: 40px; text-align: center;" value="1" id="porcoesQnt[]" onblur="calcular();">
<label for="cam">Camarão empanado</label><br>
<input type="number" name="porcoesVlr[]" id="porcoesVlr[]" style="text-align: center; border: none; background-color: white;" value="1.99" onblur="calcular();" readonly><br>

<input type="checkbox" name="porcoes[]" value="Contrafilé" id="porcoes[]" onblur="calcular();">
<input type="number" name="porcoesQnt[]" style="width: 40px; text-align: center;" value="1" id="porcoesQnt[]" onblur="calcular();">>
<label for="con">Contrafilé</label><br>
<input type="number" name="porcoesVlr[]" id="porcoesVlr[]" style="text-align: center; border: none; background-color: white;" value="1.99" onblur="calcular();" readonly><br>

[...]

<div id="resultado">&nbsp;</div>

(JavaScript)

function calcular() {

var i = 0;
var porcoes = document.getElementById('porcoes');
var porcoesQnt = document.getElementById('porcoesQnt');
var porcoesVlr = document.getElementById('porcoesVlr');
var total = 0;

if(porcoes != null){

  for (i = 0; i < porcoes.length; i++) {
    if(porcoes[i] != null){
        total = total + (parseInt(porcoesVlr[i].value, 10) * parseInt(porcoesQnt[i].value, 10));
    }
  }
}

document.getElementById('resultado').innerHTML = total;
}

Já tentei de tudo que pensei mas nada resolve faz com que apareça atualizado.

1 Resposta 1

0

Não precisa de id's, como o Sérgio falou. Você pode selecionar os elementos pelos name's, mas é interessante incluir cada grupo de elementos dentro de divs, pois irá facilitar a seleção dos elementos para realizar os cálculos.

Veja abaixo como fica (comentários explicativos no código):

// seleciona todos os checkbox pelo name
const cBox = document.getElementsByName("porcoes[]");
// seleciona todas as quantidades pelo name
const iQnt = document.getElementsByName("porcoesQnt[]");

// chama a função calcular() se algo for alterado
for(let i of cBox) i.onchange = calcular;
for(let i of iQnt) i.onchange = calcular;

function calcular(){
   
   const resultado = document.getElementById("resultado");
   // seleciona apenas os que estão checados
   const checados = document.querySelectorAll("[name='porcoes[]']:checked");
   
   // verifica se há pelo menos um checado
   if(checados.length){
      
      let total = 0;
      
      for(let i of checados){
         
         let wrap = i.parentNode; // seleciona a div pai
         let qnt = wrap.querySelector("[name='porcoesQnt[]']").value; // pega o valor do campo
         let vlr = wrap.querySelector("[name='porcoesVlr[]']").value; // pega o valor do campo
         
         total += qnt * vlr;
         
      }

      // insere o total com 2 casas decimais
      resultado.textContent = total.toFixed(2);
      
   }else{
      // se não tiver nenhum checado, esvazia o resultado
      resultado.textContent = "";
   }
}
<div>
   <input type="checkbox" name="porcoes[]" value="Tilápia">
   <input type="number" name="porcoesQnt[]" style="width: 40px; text-align: center;" value="1">
   <label for="tilapia">Tilápia</label>
   <input type="number" name="porcoesVlr[]" style="text-align: center; border: none; background-color: white;" value="1.99" readonly>
</div>
<div>
   <input type="checkbox" name="porcoes[]" value="Camarão empanado">
   <input type="number" name="porcoesQnt[]" style="width: 40px; text-align: center;" value="1">
   <label for="cam">Camarão empanado</label><br>
   <input type="number" name="porcoesVlr[]" style="text-align: center; border: none; background-color: white;" value="2.99" readonly><br>
</div>
<div>
   <input type="checkbox" name="porcoes[]" value="Contrafilé">
   <input type="number" name="porcoesQnt[]" style="width: 40px; text-align: center;" value="1">
   <label for="con">Contrafilé</label><br>
   <input type="number" name="porcoesVlr[]" style="text-align: center; border: none; background-color: white;" value="3.99" readonly><br>
</div>

<div id="resultado">&nbsp;</div>

6
  • Desse jeito está ótimo, mas voê pode me informar se tem algum jeito de ele atualizar conforme for mudando os numeros no input de quantidade?
    – Eloísa C.
    22/10/2019 às 15:48
  • O código já faz isso, atualiza ao marcar/desmarcar um checkbox ou alterar a quantidade. testa aí pra vc ver.
    – Meu ovo
    22/10/2019 às 15:50
  • Consegui. Última questão, além de porções quero fazer isso com lanches e bebidas, mas como faço para manter esse total, porque cada função vai ter nome diferente
    – Eloísa C.
    22/10/2019 às 16:00
  • Aí teria que ver como vai ficar.
    – Meu ovo
    22/10/2019 às 16:01
  • Faço um post diferente? Ah, e, no lugar da div, tem como mandar o resultado pra uma input pra puxar no php?
    – Eloísa C.
    22/10/2019 às 16:04

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .