Add value to a checkbox Instantly

Question

Add value to a checkbox Instantly

Asked 9 years, 3 months ago

Viewed 2,157 times

3

Since I don’t have much knowledge of javascript I would like a help of how I can make this calculation script, I would like when clicking on each checkbox to automatically show me the result on the screen adding up all 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 -->

Friend, You need to name the input’s, So they can be assigned to functions in javascript, If everyone has not assigned ID’s, It is not possible to do the sum. For example: <input type="" checked="" value="20,00" id="val1" />

– Mega

2015/08/29 at 16:10

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

Ola That’s just said the result decrease to $variable - total = xxx

– Fabio Henrique

2015/08/29 at 16:51
Hello Friend this last one didn’t work and I think you don’t understand. would be two exits, one with the sum of the checkbox and the other taking the variable and going up the sum sum of the checkbox.

– Fabio Henrique

2015/08/29 at 20:09
really did not function because I did not close php '?>'. See now, I did as you asked with two options one showing subtracting and the other not.

– Thalles Daniel

2015/08/29 at 21:47
That’s right. Thank you

– Fabio Henrique

2015/08/30 at 02:38

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.

by Marabesi • **111** points · Answer 1 · 2015-08-29T16:24:24+00:00

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 dot

Now for you to use the variables in PHP as $variable, $total and $total_general 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 javascript for all this 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 : https://jsfiddle.net/kcnhr66w/1/