Add value to a checkbox Instantly

3

As I'm not very familiar with javascript, I'd like some help on how I can do this calculation script, I'd like that when I click on each checkbox it automatically shows me the result on the screen, adding up all the marked and a subtraction of a variable

 <?
 $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 -->
    
asked by anonymous 29.08.2015 / 17:30

2 answers

3

See this code if it helps you:

<? 
$variavel = 100;
?>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script></head><body><form><inputtype="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>
    
29.08.2015 / 18:12
3

Come on, the first thing I modified in your code were the inputs to facilitate the result see:

<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"  />

I added the type to checkbox and changed the comma to point

Now for you to use the variables in PHP like $ variable, $ total and $ total_file you will need to save the data after each change in the checkbox, you can use ajax for this.

<?
 $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 -->

Now the javascript for all of this to work

(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;
    }
}})();

You can see the full code here too: link

    
29.08.2015 / 18:24