Disabling checkbox works, but it's not being processed on onchange

Question

When the checkbox is set to false by the javascript function, the next function doesn't seem to know it has been set to false, it just ignores it.

HTML

<input type="checkbox" name="accs" id="50" class="arms"/>Arm 1: $50<br/>
<input type="checkbox" name="accs" id="60" class="arms"/>Arm 2: $60<br/>
<input type="checkbox" name="accs" id="70" class="neck"/>Neck 1: $70<br/>
<input type="checkbox" name="accs" id="80" class="neck"/>Neck 2: $80<br/>
<div id="total">$500</div>

Javascript: This function disables the checkbox according to the input class

$('.arms, .neck').change(function(){
var myClass = $(this).attr('class'); 
$('.'+myClass).not(this).prop('checked', false); 
});

Javascript next function: The block of code that processes the action if the checkbox is either enabled or disabled

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.type != 'text'){
  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, ',', '.');
     }
   }
  }
}

After clicking all the checkbox you realize that it won't go back to the original price (500) but keeps on adding up.

Fiddle

The reason I haven't used radio is because the form must send the same 'input name' for all the options

Answer 1

I set up a fiddle here: http://jsfiddle.net/MarkSchultheiss/r6MXA/2/ Using this markup:

<input type="checkbox" name="accs" icost="50" class="arms" />Arm 1: $50
<br/>
<input type="checkbox" name="accs" icost="60" class="arms" />Arm 2: $60
<br/>
<input type="checkbox" name="accs" icost="70" class="neck" />Neck 1: $70
<br/>
<input type="checkbox" name="accs" icost="80" class="neck" />Neck 2: $80
<br/>
<div id="total">$500</div>

and this code:

var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
items.change(function () {
    var myClass = $(this).attr('class');
    $('.' + myClass).not(this).prop('checked', false);
    var total = $('#total');
    var totalcost = 0;
    total.fadeOut(300);
    items.filter(':checked').each(function (i) {
        var cost = $(this).attr('icost');
        totalcost = totalcost + parseFloat(cost);
    });
    total.text("$" + totalcost + ".00"); // fix your format here as needed
    total.fadeIn(300);
});

EDIT: manage the whole check/uncheck cycle thing with a base on the current value in the text total area.

var items = $('input.arms[type="checkbox"], input.neck[type="checkbox"]');
// get the initial total and store in a data for use later (resets as needed)
var total = $('#total');
total.data("currentvalue", parseFloat(total.text().replace(/[^0-9\,]+/g, "")));
items.change(function () {
    var currenttotal = total.data("currentvalue");
    var myClass = $(this).attr('class');
    var thisGroup = $('.' + myClass);
    var notme = $('.' + myClass + ':checked').not(this);
    var notmeCost = (notme.length ? notme.attr('icost') : ($(this).is(':checked') ? 0 : $(this).attr('icost')));

    notme.prop('checked', false);
    currenttotal = currenttotal - notmeCost;
    total.fadeOut(300);
    thisGroup.filter(':checked').each(function (i) {
        var cost = $(this).attr('icost');
        currenttotal = currenttotal + parseFloat(cost);
    });
    total.data("currentvalue", currenttotal);
    total.text("$" + currenttotal + ".00"); // fix your format here as needed
    total.fadeIn(300);
});