3

Como não tenho muito conhecimento de javascript gostaria de uma ajuda de como posso fazer esse script de calculo, gostaria que ao clicar em cada checkbox automaticamente me mostre o resultado na tela somando todas as marcadas
e uma subtração de uma variavel

 <?
 $variavel = 100,00
 ?>

 <input type="" checked="" value="20,00"  />
 <input type="" checked="" value="20,00"  />
 <input type="" checked="" value="20,00"  />
 <input type="" checked="" value="20,00"  />

 <div id='resultado_soma'><?echo $total?></div>  <!--Resultado da soma dos 
 checkbox-->
 <div id='resultado_soma_menos_variavel'><?echo $total_geral?></div>  <!-- 
 Resultado Pegando      
 a Variavel - Resultado checkbox -->
1
  • Amigo, Você precisa nomear o nome dos input's, Para que possam serem atribuídos a funções em javascript, Se todos não tiverem ID's atribuídas, Não é possível fazer a soma. Por exemplo: <input type="" checked="" value="20,00" id="val1" />
    – Mega
    Commented 29/08/2015 às 16:10

2 Respostas 2

3

Veja esse código se ajuda vc:

<? 
$variavel = 100;
?>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    </head>
    <body>
    <form>
    <input type="checkbox" name="soma" checked="checked" value="20" />
    <input type="checkbox" name="soma" value="20" />
    <input type="checkbox" name="soma" value="20" />
    <input type="checkbox" name="soma" value="20" />
    <input type="checkbox" name="soma" value="20" />
    <label>Resultado subtraindo</label>
    <input id='resultado' type="text" value='20' />
    <label>Resultado sem subtrair</label>
     <input id='resultado_sem_subtratir' type="text" value='20' />
    </form>

    <script>
    function somartotal() {
    var resultado = $("input:checked");
    var i=0;
    var total = 0;
    for (i=0;i<resultado.length;i++)
    {
    total = total+parseInt(resultado[i].value);

    }
     total_subtraindo = total - <?php echo $variavel;?>
     $("#resultado").val("R$ " + total_subtraindo.toFixed(2).replace('.',','));
  $("#resultado_sem_subtratir").val("R$ " + total.toFixed(2).replace('.',','));


    }

    somartotal();
    $(":checkbox").click(somartotal);

    </script>

    </body>
    </html>
4
  • Ola Isso mesmo só falou o resultado diminuir a $variavel - total = xxx Commented 29/08/2015 às 16:51
  • Ola Amigo esse ultimo não funcionou e acho que voce não entendeu. seriam duas saidas, uma com o somatorio das checkbox e outra pegando a variavel e subitraindo o valor do somatório somatorio das checkbox. Commented 29/08/2015 às 20:09
  • realmente não funfou pq nao fechei o php '?>'. Veja agora, fiz conforme o que pediu com duas opções uma mostrando subtraindo e outra não. Commented 29/08/2015 às 21:47
  • Isso mesmo.Obrigado Commented 30/08/2015 às 2:38
3

Vamos lá, a primeira coisa que modifiquei no seu código foram os inputs para facilitar o resultado veja:

<input type="checkbox" checked="" value="20.00"  />
<input type="checkbox" checked="" value="20.00"  />
<input type="checkbox" checked="" value="20.00"  />
<input type="checkbox" checked="" value="20.00"  />

Adicionei o type para checkbox e alterei a virgula para ponto

Agora para você utilizar as variáveis em PHP como $variavel, $total e $total_geral será necessário você salvar os dados após cada alteração nos checkbox, você pode utilizar ajax para isso.

<?
 $variavel = 100,00
 ?>
<input type="checkbox" checked="" value="20.00"  />
<input type="checkbox" checked="" value="20.00"  />
<input type="checkbox" checked="" value="20.00"  />
<input type="checkbox" checked="" value="20.00"  />
<div id='resultado_soma'><?echo $total?></div>  <!--Resultado da soma dos checkbox-->
<div id='resultado_soma_menos_variavel'><?echo $total_geral?></div>
<!-- Resultado Pegando a Variavel - Resultado checkbox -->

Agora o javascript para tudo isso funcionar

(function() {
var elements = document.getElementsByTagName('input');
var resultado = document.getElementById('resultado_soma');
var total = 100.00;

for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function() {
        if (this.checked === false) {
            total = total - this.value;
        } else {
            total = total + parseFloat(this.value);
        }

        resultado.innerHTML = total;
    }
}})();

Você pode ver o código completo aqui também : https://jsfiddle.net/kcnhr66w/1/

6
  • Nesse script como posso fazer que ao clicarmos alem da soma mostrar o names e os values dos checkbox marcados Commented 2/01/2016 às 12:28
  • os names você quer dizer o atributo name do input ?
    – Marabesi
    Commented 2/01/2016 às 17:57
  • sim o name="" e o value="" Commented 2/01/2016 às 18:08
  • modelo i.sstatic.net/E0VQG.jpg Commented 2/01/2016 às 18:12
  • Não sei se é exatamente isso que você precisa mas aqui vai um novo exemplo: jsfiddle.net/g055ndgq/4
    – Marabesi
    Commented 2/01/2016 às 19:22

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 .