I have one problem. The systems works fine when I select the checkboxes, the Total value changes, but as soon as I modify the text input, it changes to 0. I need to exclude this textbox input from changing the value.
here is the html:
<input type="checkbox" id="15000"/>$15000<br/>
<input type="checkbox" id="9400"/>$9400<br/>
<label>Quantity</label><input class="text" type="text" maxlength="3" size="2" value="1" name="qty"></input>
<div id="total">$5000</div>
Here is the javascript:
var input = document.getElementsByTagName("input");
var total = document.getElementById("total");
var prev;
for(i=0;i<input.length;i++){
input[i].onchange = function(){
if(this.checked){
$("#total").fadeOut(300);
$("#total").fadeIn(300);
prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) + parseFloat(this.id);
total.innerHTML = "$ " + prev.formatMoney(0, ',', '.');
}else{
$("#total").fadeOut(300);
$("#total").fadeIn(300);
prev=parseFloat(total.innerHTML.replace(/[^0-9\,]+/g,"")) - parseFloat(this.id);
total.innerHTML = "$ " + prev.formatMoney(0, ',', '.');
}
}
}
Here is the fiddle: http://jsfiddle.net/M7My9/1/
Add if(this.type=='text')
in the first line of onchange handler to detect the type of the input