I have this code in javascript that adds values to the checkboxes, for some reason it only adds the first value, for example, the value is 1.75 it adds only 1.00, that's the code.
<script type="text/javascript">
var containers = document.querySelectorAll("[data-calc]");
var Calculadora = function(container) {
var self = this;
self.container = container;
self.hiddentotal = self.container.querySelector("input[name='hiddentotal']");
self.total = self.container.querySelector("input[name='total']");
self.tamanhos = [].slice.call(self.container.querySelectorAll("input[name='tamanho[]']"));
self.asplos = [].slice.call(self.container.querySelectorAll("input[name='asplo[]']"));
self.valores = [].slice.call(self.container.querySelectorAll("input[name='valor[]']"));
var onChange = function (event) {
self.onInputChange(event);
}
this.tamanhos.forEach(function (tamanho, indice) {
tamanho.addEventListener("change", onChange);
});
this.asplos.forEach(function (asplo, indice) {
asplo.addEventListener("change", onChange);
});
this.valores.forEach(function (valor, indice) {
valor.addEventListener("change", onChange);
});
}
Calculadora.prototype.onInputChange = function (event) {
//recuperando o valor do radio tamanho selecionado.
var tamanho = this.tamanhos.filter(function (tamanho, indice) {
return tamanho.checked
})[0];
tamanho = tamanho ? parseFloat(tamanho.dataset.valor) : 0;
var asplo = this.asplos.filter(function (asplo, indice) {
return asplo.checked
})[0];
asplo = asplo ? parseFloat(asplo.dataset.valor) : 0;
//somando os valores selecionados.
var valor = this.valores.reduce(function (atual, proximo, indice) {
var valor = atual;
if (atual instanceof HTMLElement) {
valor = atual.checked ? parseInt(atual.dataset.valor) : 0;
}
if (proximo.checked) {
valor += parseInt(proximo.dataset.valor)
}
return valor;
});
//não entendi o pq do seu total ser a soma do tamanho com os valores, mas isto já forge a parte tecnica.
var total = tamanho + asplo + valor;
//formando o total como currency.
//este metodo não é suportado pelo IE abaixo do 11, assim como pelo Safari.
//para os browsers acima citados, é necessario uar um Polyfill (sugestão: https://github.com/andyearnshaw/Intl.js)
var format = total.toLocaleString("pt-BR", { style: 'currency', currency: 'BRL' });
this.hiddentotal.value = total
this.total.value = format;
};
var calculadoras = [];
[].forEach.call(containers, function (container, indice) {
var calculadora = new Calculadora(container);
calculadoras.push(calculadora);
});
</script>
no html is thus
<label>
<input type="checkbox" name="valor[]" value="Valornumero1" data-valor="1.50" />
Valornumero1
</label>