javascript - jQuery根据输入数字计算总金额

Question

我正在制作一个表单，用户可以使用 <input type="number"> 选择多张票。场，价格固定为5美元/票。我想在下面的只读字段中动态显示总价。

问题:

• 如何默认显示总金额$5？

• 如果您输入 2 张门票，则应显示 10 美元，如果输入 3 张门票，则应显示 15 美元，依此类推。

jQuery(function($) {

  var $amount_fields = $('#number-tickets'),
      $total_amount = $('#total-amount');
      
  $amount_fields.on('input', function(e) {
    var final_value = 0;
    $amount_fields.each(function() {
      var value = $(this).val();
      if (!isNaN(value) && value > 0) final_value += parseInt(value);
    });
    $total_amount.val(final_value);
  });

});

label, span {
  display: block;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span>Number of tickets @ $5/ticket:</span>
  <input type="number" name="number-of-tickets" value="1" min="1" id="number-tickets" />
</label>
<label>
  <span>Total amount:</span>
  $ <input type="text" name="total-amount" value="" id="total-amount" readonly />
</label>

Answer 1

您只需将金额乘以 5 即可显示正确的总数。请注意，应向 parseInt 传递 radix 。

然后要使其在页面加载时正确显示，请使用 .trigger('input')

jQuery(function($) {
  var $amount_fields = $('#number-tickets'),
    $total_amount = $('#total-amount');
  $amount_fields.on('input', function(e) {
    var final_value = 0;
    $amount_fields.each(function() {
      var value = $(this).val();
      if (!isNaN(value) && value > 0) final_value += parseInt(value,10) * 5;
    });
    $total_amount.val(final_value);
  }).trigger('input');
});

label,
span {
  display: block;
  margin: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
  <span>Number of tickets @ $5/ticket:</span>
  <input type="number" name="number-of-tickets" value="1" min="1" id="number-tickets" />
</label>
<label>
  <span>Total amount:</span>
  $
  <input type="text" name="total-amount" value="" id="total-amount" readonly />
</label>