如何在jquery中添加多输入文本值
how to add the multiple input text value in jquery
//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这个怎么了。任何帮助都将不胜感激。
在$(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>相关文章：
- 尝试在PHP中回显输入文本时出现未定义的索引错误
- 使用模拟按键在输入框中自动输入文本
- 如何添加类，同时开始在文本字段中输入文本
- JQuery使用相同的功能自动完成各种输入文本
- 如何设置输入文本框jquery的值
- 输入文本框为空时的阻止按钮asp.网络表单
- 基于单选框更新页眉，选中并选择输入文本
- 将输入文本与某个选项的值相匹配并自动选择
- 如何在 JavaScript 中创建输入文本框
- 如何使用纯Javascript观看输入文本框
- 需要使用javascript获取输入文本，然后将其添加到句子中
- php&js-将电子邮件添加到输入文本中
- 动态启用/禁用来自控制器的输入文本
- .val(）不返回输入文本
- 从确认框中预填充输入文本框
- 如何使用JavaScript解析输入文本中给定的数据
- 添加/删除/更改输入文本的部分值
- 根据输入文本按元素排序，AngularJS
- 如何将(a*b）两个输入文本值相乘，并在javascript中随文本变化动态显示
- 如何从Tr重复的输入文本中获取值
