禁用复选框有效，但未在 onchange 上处理

Question

当复选框被javascript函数设置为false时，下一个函数似乎并不知道它已被设置为false，它只是忽略它。

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：该函数根据输入类禁用复选框

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

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.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, ',', '.');
     }
   }
  }
}

点击所有复选框后，您意识到它不会回到原来的价格 (500) 而是继续加起来。

Fiddle

我没有使用收音机的原因是因为表单必须为所有选项发送相同的“输入名称”

Answer 1

我在这里设置了一个小提琴：http://jsfiddle.net/MarkSchultheiss/r6MXA/2/ 使用此标记：

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

还有这段代码：

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

编辑：根据文本总区域中的当前值管理整个检查/取消检查循环。

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