JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<?
 $variavel = 100,00
 ?>
 <form id="form">  
    <input type="checkbox" name="teste1" value="20.00" />
    <input type="checkbox" name="teste2" value="20.00" />
    <input type="checkbox" name="teste3" value="20.00" />
    <input type="checkbox" name="teste4" value="20.00" />
    </form>

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

JavaScript

(function() {
    var elements = document.getElementsByTagName('input');
    var resultado = document.getElementById('resultado_soma');
    for (var i = 0; i < elements.length; i++) {
        elements[i].addEventListener('change', calcular);
    }

    function calcular() {
        var dados = [].map.call(elements, function(input) {
            return {
			el: input,
                value: parseInt(input.value),
                name: input.name
            };
        });
        var total = dados.reduce(function(soma, el) {
            return soma + (el.el.checked ? el.value : 0);
        }, 0);

        //resultado.innerHTML = JSON.stringify(dados) + ' ' + total;
        
        resultado.innerHTML = $("#form").serialize().replace(/&/g, '<br />') + '<br /><br />R$ ' + total.toFixed(2).replace(".",",");
        
        
    }
})();