How to serialize a checkbox form

Question

In this script he calculates the total values of the checkbox marked, which adaptation would be necessary in addition to the sum he also show the attributes name and value of their checked checkboxes?

HTML:

    <input type="checkbox" name="teste" checked="" value="20.00" />
    <input type="checkbox" name="teste" checked="" value="20.00" />
    <input type="checkbox" name="teste" checked="" value="20.00" />
    <input type="checkbox" name="teste" 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 -->

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

Answer 1

I don’t know if I got it right, but take a look at this:

First thing, give a DIFFERENT name for each checkbox: teste1, teste2, teste3 etc...

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

Then where is:

resultado.innerHTML = JSON.stringify(dados) + ' ' + total;

Trade in for:

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

See that I commented the first line (the one I had before) because I don’t know what you want to do with it.

Try it on this Fiddle: https://jsfiddle.net/s2uw6n57/3/