Question

我正在尝试添加一些表单字段但是我尝试的数组并不重要，如果再次检查它会不断累加总值，我需要它来对复选框中的值进行求和来自金额的输入值，仅当检查未选中的值是否减去或不添加时，某些帮助非常受欢迎。

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

});

THE DEMO

Answer 1

更改

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

是

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

在更新金额值时，您意外添加了原始Amount值和total。

如果你想在总额中添加其他东西（附加费？其他购买税？），你需要先告诉我们最好的方法，然后才能告诉你更好的方法。但一般的想法是将该值存储在变量中：

var otherAmount = 20;

然后像以前一样添加它：

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

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

Answer 2

它会不断添加，因为您在此处提取新的金额值：

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

如果您想在原始值20之上添加总和，您可以这样做： https://jsfiddle.net/q0qqubgg/2/

Answer 3

将您的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();

});

DEMO HERE

Answer 4

首先，您的金额变量需要从您的函数中提取，以便您不会在每次更改事件时获取更新的值。另外......我可以建议您在示例中干掉并减少不必要的代码吗？

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

Answer 5

以下是工作版本：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);

});

Javascript总是累计总和

5 个答案: