如何在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')选择器获取具有class作为getAmount的所有元素的值

注意：也可以使用input事件代替keyup input

 $('#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>