Question

好吧，我正在尝试制作一种发票。这是我的问题：发票有各种输入框，其中金额由用户输入，并且在这些框列表的末尾有“总费用”（输入框）。所以我想要的是，如果输入框中填入了一些值（数字），并且用户点击“总费用”（输入框），则将值相加。我该怎么做？我之前使用过jQuery。那么，如果有可能，任何人都可以解释我怎么能在jQuery中做到这一点？

到目前为止

脚本

$('.charge').blur(function () {
var totalocharges = 0;
$('.charge').each(function() {
    totalocharges += Number($(this).val());
});


$('#total_charges').val(totalocharges);
});

我的观点（只是其中的一部分）：

<div class="form-group  col-md-offset-1 col-md-5">          
    <input type="number" class="charge form-control" id="amount1" name="amount1" value="<?php echo set_value('amount1'); ?>" placeholder="amount" required>
  </div>

<div class="form-group  col-md-offset-1 col-md-5">          
    <input type="number" class="charge form-control" id="amount2" name="amount2" value="<?php echo set_value('amount2'); ?>" placeholder="amount" required>
  </div>

<div class="form-group  col-md-offset-1 col-md-5">          
    <input type="text" class="form-control" id="total_charges" name="total_charges" value="<?php echo set_value('total_charges'); ?>" placeholder="net amount">
  </div>

Answer 1

你可以用jQuery做这样的事情。

在此示例中，您的输入框将具有＆＃39; charge＆＃39;类。并且您的总费用输入ID总费用

$('.charge').blur(function () {
    var total_charges = 0;
    $('.charge').each(function() {
        total_charges += Number($(this).val());
    });


    $('#total-charges').val(total_charges);
});

这里有一个工作代码示例：

https://jsfiddle.net/0e8emcbu/

如果你想用按钮激活它，那就是这样的：

https://jsfiddle.net/8cmL29xt/

Answer 2

将事件监听器附加到“总计费用”输入框。例如，您可以使用“焦点”事件。

$("#total_charge").on('focus', function(){

  //here you have to make calculations
  //get values on all required input boxes
  var value1 = $("#input_box1").val();
  //another value

  //sum (multiply, divide etc) values
  val result = value1 + value2 + ...l

  //change total_charge value
  $("#total_charge").val(result);
});

使用jQuery点击添加数字

2 个答案: