javascript - 如何在jquery中添加多个输入文本值

Question

//my jquery
//get the amount and calculate the total amount

$('#dynamicDiv').on('keyup', '.getAmount', function(event) {
			var total = 0;
			$(this).each(function() {
				total += parseInt(this.value,10);
			});

<div id="dynamicDiv">
<div class="row form-group delDiv">
	<div class="col-md-5">
		<div class="form-group">
			<label class="col-md-5 control-label">Allowance Name: </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control">
			</div>
		</div>
	</div>
	<div class="col-md-5">
		<div class="form-group">
			<label class="col-md-5 control-label">Allowance Amount: </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control getAmount">
			</div>
		</div>
	</div>
	<div class="col-md-2">
		<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
			<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
		</div>
	</div>	
</div>
  	<div class="row form-group delDiv">
	<div class="col-md-5">
		<div class="form-group">
			<label class="col-md-5 control-label">Allowance Name: </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control">
			</div>
		</div>
	</div>
	<div class="col-md-5">
		<div class="form-group">
			<label class="col-md-5 control-label">Allowance Amount: </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control getAmount">
			</div>
		</div>
	</div>
	<div class="col-md-2">
		<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i></button>
			<button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i></button>
		</div>
	</div>	
</div>
</div> <!-- parent div end -->
<div class="form-group">
<div class="row ">
	<div class="col-md-6 col-md-offset-4">
		<div class="form-group">
			<label class="col-md-5 control-label"><b>Allowance Total:</b> </label>
			<div class="col-md-7">
				<input type="text" name="" value="" class="form-control totalAmount">
			</div>
		</div>
	</div>
</div>
</div>   

我觉得这很复杂，我想将多个输入文本值相加并显示在总金额文本值中。以便输入值的总和。我有 jQuery 这有什么问题。任何帮助将不胜感激。

Answer 1

在$(this).each(function() {中，this将返回调用事件的element。使用$('.getAmount')选择器获取所有类为getAmount

的元素的值

注意:也可以使用 input事件而不是 keyup

$('#dynamicDiv').on('input', '.getAmount', function(event) {
  var total = 0;
  $('.getAmount').each(function() {
    total += parseInt(this.value, 10) || 0;
    //consider || condition as `parseInt('')` is `NaN` or use `Number(this.value)`
  });
  $('.totalAmount').val(total);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="dynamicDiv">
  <div class="row form-group delDiv">
    <div class="col-md-5">
      <div class="form-group">
        <label class="col-md-5 control-label">Allowance Name:</label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control">
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label class="col-md-5 control-label">Allowance Amount:</label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control getAmount">
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
        </button>
        <button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
        </button>
      </div>
    </div>
  </div>
  <div class="row form-group delDiv">
    <div class="col-md-5">
      <div class="form-group">
        <label class="col-md-5 control-label">Allowance Name:</label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control">
        </div>
      </div>
    </div>
    <div class="col-md-5">
      <div class="form-group">
        <label class="col-md-5 control-label">Allowance Amount:</label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control getAmount">
        </div>
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <button type="button" class="btn btn-default btn-sm newDiv" data-toggle="tooltip" data-placement="bottom" title="Add new row"><i class="fa fa-check"></i>
        </button>
        <button type="button" class="btn btn-default btn-sm removeDiv" data-toggle="tooltip" data-placement="bottom" title="Delete current row"><i class="fa fa-times"></i>
        </button>
      </div>
    </div>
  </div>
</div>
<!-- parent div end -->
<div class="form-group">
  <div class="row ">
    <div class="col-md-6 col-md-offset-4">
      <div class="form-group">
        <label class="col-md-5 control-label"><b>Allowance Total:</b> 
        </label>
        <div class="col-md-7">
          <input type="text" name="" value="" class="form-control totalAmount">
        </div>
      </div>
    </div>
  </div>
</div>