使用 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();
  });