using price to set the input checkbox value to be calculated

Question

I have some checkboxes that have an x value, which when they are selected make the sum of their value.

However this value is being picked up through Value, and I needed to use an attribute that replaced the value so that I can send as checked input to the bank.

currently is like this...

var itens = document.querySelectorAll("tr td option");
var resultado = document.getElementById("result");
for ( i = 0,  soma = 0; i < itens.length ; i++){
    itens[i].onchange = function(){
    	if (this.checked==true) {
    		soma = soma + parseInt(this.value);
    	}
        else {
            soma = soma - parseInt(this.value);
        }
        resultado.setAttribute("value","R$ "+soma+",00")
    }  
}

String.prototype.formatMoney = function() {
    var v = this;

    if(v.indexOf('.') === -1) {
        v = v.replace(/([\d]+)/, "$1,00");
    }

    v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
    v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
    v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");

    return v;
};
String.prototype.toFloat = function() {
    var v = this;

    if (!v) return 0;
    return parseFloat(v.replace(/[\D]+/g, '' ).replace(/([\d]+)(\d{2})$/, "$1.$2"));
};
(function(){
    "use strict";

    var $chs = document.querySelectorAll('input[calc="ch[]"'),
        $result = document.getElementById('result'),
        chsArray = Array.prototype.slice.call($chs);

    chsArray.forEach(function(element, index, array){
        element.addEventListener("click", function(){
            var v = this.value,
                result = 0;
            v = v.toFloat();

            if (this.checked === true) {
                result = $result.value.toFloat() + parseFloat(v);
            } else {
                result = $result.value.toFloat() - parseFloat(v);
            }

            $result.value = "R$ " + String(result).formatMoney();
        });
    });

}());

<label>A ideia é o value ter o valor de 1 para enviar ao banco e adicionar um atributo tipo preco="100,00" que irá levar o valor a ser calculado</label>

<br>

<input id="cmn-toggle-7" name="NomeDoCampo" calc="ch[]" value="100,00" class="cmn-toggle cmn-toggle-yes-no" type="checkbox">

<input id="cmn-toggle-8" name="NomeDoCampo2" calc="ch[]" value="100,00" class="cmn-toggle cmn-toggle-center-yes-no" type="checkbox">

<input type="text" name="TotalCalculado" id="result" class="input-xlarge" value="R$ 0,00">

"the idea is value to have the value of 1 to send to the bank and add an attribute type price="100,00" which will take the value to be calculated"

what I could adjust in code to work properly, to a little locked in this detail hehe vlw gnt

Answer 1

You can use a data-attribute:

<input id="cmn-toggle-9" type="checkbox" data-price="100,00"....

and access it via javascript:

var checkbox = document.getElementById('cmn-toggle-9');
var price    = checkbox.dataset.price;