Javascript 禁用复选框是可行的，但在onchange上未对其进行处理

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

HTML

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，而是继续累积

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

我在这里设置了一个小提琴： 使用此标记：

<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"]');
// 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);
});

我在这里摆好了小提琴： 使用此标记：

<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"]');
// 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);
});

---

如果您只想选择一个手臂和一个脖子，为什么不使用两个无线电组而不是四个复选框？@j08691无线电将是最好的选择，但我们的项目很难将格式更改为无线电。如果每个收音机在html:name=accesory中都有相同的输入属性，并且该属性也与第一个函数兼容，那么它就可以工作了。您可以减少该属性，并解决以下问题：。另外，您应该在value属性中真正设置值，而不是ID。ID不能以数字开头，也不能在html 5中只是一个数字。我提出了一个可能的解决方案-与您的解决方案完全不同，但如果可以，请将其用于创意。如果您只想选择一只手臂和一个脖子，为什么不使用两个无线电组而不是四个复选框？@j08691一个无线电组是最好的选择，但是我们的项目很难将格式更改为无线电组。如果每个收音机在html:name=accesory中都有相同的输入属性，并且该属性也与第一个函数兼容，那么它就可以工作了。您可以减少该属性，并解决以下问题：。另外，您应该在value属性中设置值，而不是ID。ID不能以数字开头，也不能在html 5中只是一个数字。我提出了一个可能的解决方案-与您的解决方案完全不同，但如果可以，请将其用于想法。谢谢@markschultheis这非常有用！唯一的问题是，它不接受起始值500，它只是将所有科目相加，但不包括全部500美元。我对此感到好奇，并提出了一个问题——在复选框激活后，其他事件是否会改变该值？如果是这种情况，则需要1。保存值你知道怎么做的，减去组中当前选中的值查看第一部分myClass的内容，-我可以更新来做到这一点..Done@markschultheis我保存了值，在第一轮工作，但之后发生了一些奇怪的事情…我目前面临着一些我没有预料到但不是很难的事情。有些项目可以执行多项选择。例如，如果我想对手臂执行多重选择，该怎么办？条件应该在这行：ifinput=武器{notme.prop'checked'，false；}谢谢@markschultheis这非常有用！唯一的问题是，它不接受起始值500，它只是将所有科目相加，但不包括全部500美元。我对此感到好奇，并提出了一个问题——在复选框激活后，其他事件是否会改变该值？如果是这种情况，则需要1。保存值你知道怎么做的，减去组中当前选中的值查看第一部分myClass的内容，-我可以更新来做到这一点..Done@markschultheis我保存了值，在第一轮工作，但之后发生了一些奇怪的事情…我目前面临着一些我没有预料到但不是很难的事情。有些项目可以执行多项选择。例如，如果我想对手臂执行多重选择，该怎么办？条件应该在这行：ifinput=手臂{notme.prop'checked'，false；}

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