Javascript不断地将总和相加

Javascript keeps adding up a sum on total

本文关键字：Javascript      更新时间：2024-02-10

我正在尝试添加一些表单字段，但我尝试的数组并不重要，如果再次选中，它会不断添加总值，我需要它将复选框中的值与金额的输入值相加，只有在未选中的值减去或不相加时才选中。非常感谢您的帮助。

<div class="hire-accessories"><input type="checkbox" name="baby-st" id="baby-st" class="checkbox" value="5"/>Baby Seat 0-2 Year £5(Day)</div>
<div class="hire-accessories"><input type="checkbox" name="child-st" id="child-st" class="checkbox" value="5" />Child Seat 3-7 Year Seat £7(Day)</div>
<div class="hire-accessories"><input type="checkbox" name="gps" id="gps" class="checkbox" value="5" />TomTom GPS</div>
<div class="hire-accessories"><input type="checkbox" name="bike-rack" id="bike-rack" class="checkbox" value="10" />Bike Rack</div>
<div class="hire-accessories"><input type="checkbox" name="mbike" id="mbike" class="checkbox" value="5" />Montainbike</div>
<input type="text" name="Amount" id="Amount" value="20" readonly class="cat_textbox" />

我的JS如下：

var updateTotal = function () { 
    var Amount = parseFloat(document.getElementById("Amount").value);
    var total = 0;

    total += ($('input[name=baby-st]:checked').length > 0) ? parseFloat($('input[name=baby-st]:checked').val()) : 0;
    total += ($('input[name=child-st]:checked').length > 0) ? parseFloat($('input[name=child-st]:checked').val()) : 0;
    total += ($('input[name=gps]:checked').length > 0) ? parseFloat($('input[name=gps]:checked').val()) : 0;
    total += ($('input[name=bike-rack]:checked').length > 0) ? parseFloat($('input[name=bike-rack]:checked').val()) : 0;
    total += ($('input[name=mbike]:checked').length > 0) ? parseFloat($('input[name=mbike]:checked').val()) : 0;
        document.getElementById('Amount').value = Amount+total;
};
$('#baby-st, #child-st, #gps, #bike-rack, #mbike').change(function() {
    if(this.checked)
   {
   }
   updateTotal();
});

演示

更改

document.getElementById('Amount').value = Amount+total;

成为

document.getElementById('Amount').value = total;

更新Amount的值时，意外地将原始Amount值与total一起添加。

如果您想在总额中添加其他内容（附加费？其他购买？税收？），您需要向我们提供更多信息，然后我们才能告诉您最佳方法。但一般的想法是将该值存储在一个变量中：

var otherAmount = 20;

然后像以前一样添加：

document.getElementById('Amount').value = total + otherAmount;

（你不能将其他金额存储在#amount.value中，这正是你想要做的。）

将Amount声明移到updateTotal函数之外。

var Amount = parseFloat(document.getElementById("Amount").value);
var updateTotal = function () { 
    var total = 0;
    total += ($('input[name=baby-st]:checked').length > 0) ? parseFloat($('input[name=baby-st]:checked').val()) : 0;
    total += ($('input[name=child-st]:checked').length > 0) ? parseFloat($('input[name=child-st]:checked').val()) : 0;
    total += ($('input[name=gps]:checked').length > 0) ? parseFloat($('input[name=gps]:checked').val()) : 0;
    total += ($('input[name=bike-rack]:checked').length > 0) ? parseFloat($('input[name=bike-rack]:checked').val()) : 0;
    total += ($('input[name=mbike]:checked').length > 0) ? parseFloat($('input[name=mbike]:checked').val()) : 0;
    document.getElementById('Amount').value = Amount+total;
};
$('#baby-st, #child-st, #gps, #bike-rack, #mbike').change(function() {
    if(this.checked)
    {
    }
    updateTotal();
});

此处演示

它一直在添加，因为你在这里提取了新的金额值：

var Amount = parseFloat(document.getElementById("Amount").value);

如果你想在原始值20的基础上加上和，你必须这样做：https://jsfiddle.net/q0qqubgg/2/

这是一个工作版本：https://jsfiddle.net/k79ah2d7/

您首先需要在函数之外设置"var Amount"。然后，在更改时，您希望从当前复选框中重新配置您的总额，返回该值并将其添加到您的原始基本金额中。

//Moved this out of the function
var Amount = parseFloat($('#Amount').val());
var updateTotal = function () { 
var total = 0;
total += ($('input[name=baby-st]:checked').length > 0) ? parseFloat($('input[name=baby-st]:checked').val()) : 0;
total += ($('input[name=child-st]:checked').length > 0) ? parseFloat($('input[name=child-st]:checked').val()) : 0;
total += ($('input[name=gps]:checked').length > 0) ? parseFloat($('input[name=gps]:checked').val()) : 0;
total += ($('input[name=bike-rack]:checked').length > 0) ? parseFloat($('input[name=bike-rack]:checked').val()) : 0;
total += ($('input[name=mbike]:checked').length > 0) ? parseFloat($('input[name=mbike]:checked').val()) : 0;
    //Return your total
    return total;     
};
$('#baby-st, #child-st, #gps, #bike-rack, #mbike').change(function() {
    if(this.checked)
   {

   }
   var total = updateTotal();
   //Reset the amount to display
   $('#Amount').val(Amount+total);
});

首先，您的amount变量需要从函数中提取，这样您就不会在每次更改事件中都得到更新的值。而且我可以建议你在你的例子中删除并减少不必要的代码吗？

// Use parseInt everywhere instead of parseFloat. You're not
// supplying floating integers, so no need to parse them as one
var amount = parseInt(document.getElementById("Amount").value);
var updateTotal = function() {
  var total = 0;
  // Loop through the inputs since they all share the same class
  $('.hire-accessories input:checked').each(function() {
    total += parseInt($(this).val());
  });
  document.getElementById('Amount').value = amount + total;
};
// Pass the function directly to the event listener
// the anonymous function and random conditional are unnecessary
$('.hire-accessories input').change(updateTotal);

Fiddle

相关文章：