使用 jquery 的所有文本框的总和

Question

我在模糊调用中添加了所有文本框值。 我在一个文本框中给出了一些数字。 当它尝试添加另一个文本框值的值时，它会抛出 NaN。

这是我的代码

 function sumOfIncome() { var sum = 0; $('.add').each(function() { sum += parseInt(this.value); console.log(sum) }); $('#netPay').val(sum); } $('.add').blur(function() { sumOfIncome(); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group row"> <div class="col-md-3"> <label for="DA" class="col-form-label">DA</label> </div> <div class="col-sm-2"> <input type="number" class="form-control add" id="da" placeholder="DA"> </div> </div> <div class="form-group row"> <div class="col-md-3"> <label for="HRA" class="col-form-label">HRA</label> </div> <div class="col-sm-2"> <input type="number" class="form-control add" id="hra" placeholder="HRA"> </div> </div>

我哪里做错了？

Answer 1

最简单的解决方案是将 sum 行更改为sum += parseInt(this.value) || 0; sum += parseInt(this.value) || 0; . 这样，如果该字段为空并返回像NaN这样的假值，它将改为使用0 。

 function sumOfIncome() { var sum = 0; $('.add').each(function() { sum += parseInt(this.value) || 0; console.log(sum) }); $('#netPay').val(sum); } $('.add').blur(function() { sumOfIncome(); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group row"> <div class="col-md-3"> <label for="DA" class="col-form-label">DA</label> </div> <div class="col-sm-2"> <input type="number" class="form-control add" id="da" placeholder="DA"> </div> </div> <div class="form-group row"> <div class="col-md-3"> <label for="HRA" class="col-form-label">HRA</label> </div> <div class="col-sm-2"> <input type="number" class="form-control add" id="hra" placeholder="HRA"> </div> </div>

Answer 2

使用这个$.isNumeric() jsfiddle ：

网址：

<div class="form-group row">
    <div class="col-md-3"><label for="DA" class="col-form-label">DA</label></div>
        <div class="col-sm-2">   <input type="number" class="form-control add" id="da" placeholder="DA">
        </div>
    </div>

<div class="form-group row">
    <div class="col-md-3"><label for="HRA" class="col-form-label">HRA</label></div>
        <div class="col-sm-2">   <input type="number" class="form-control add" id="hra" placeholder="HRA">
        </div>
</div>
<div id="netPay">

</div>

查询：

function sumOfIncome() {
   var sum = 0;
   $('.add').each(function(){
   var val = $(this).val();
   if($.isNumeric(val))
   {
       sum += parseInt(val);
       console.log(sum)
   }
   });
   $('#netPay').text(sum);
  }

  $('.add').blur(function(){
    sumOfIncome();
  });