需求：

有一個頁面需要將input框填入的各個費用自動相加，添加到“合計費用”里。

解決方案：

使用jquery的blur實踐，每個費用的Input框檢測到失去焦點時，將所有的input框數值相加求和，然后寫入到“合計費用”框中

代碼：

HTML代碼如下所示

<!--管理費--><div class="form-group"><label class="col-xs-2 control-label">管理費</label><div class="input-group col-xs-8"><input type="number" class="form-control bill-count" name="fee_gl" autocomplete="off"></div></div><!--光纖費--><div class="form-group"><label class="col-xs-2 control-label">光纖費</label><div class="input-group col-xs-8"><input type="number" step="0.01" class="form-control bill-count" name="fee_gx" autocomplete="off"></div></div><!--稅金--><div class="form-group"><label class="col-xs-2 control-label">稅金</label><div class="input-group col-xs-8"><input type="number" step="0.01" class="form-control bill-count" name="fee_sj" autocomplete="off"></div></div><!--社保--><div class="form-group"><label class="col-xs-2 control-label">社保</label><div class="input-group col-xs-8"><input type="number" step="0.01" class="form-control bill-count" name="fee_sb" autocomplete="off"></div></div><!--公積金--><div class="form-group"><label class="col-xs-2 control-label">公積金</label><div class="input-group col-xs-8"><input type="number" step="0.01" class="form-control bill-count" name="fee_gjj" autocomplete="off"></div></div><!--殘障金--><div class="form-group"><label class="col-xs-2 control-label">殘障金</label><div class="input-group col-xs-8"><input type="number" step="0.01" class="form-control bill-count" name="fee_czj" autocomplete="off"></div></div><!--費用合計--><div class="form-group"><label class="col-xs-2 control-label">費用合計</label><div class="input-group col-xs-8"><input type="number" disabled id="fee-total" class="form-control" name="fee_total" value="0" autocomplete="off"></div></div>

JS代碼如下所示

// 收款項失去焦點事件$('.bill-count').blur(function(){var _total = 0;$('.bill-count').each(function(){_total += Number(this.value);})$('#fee-total').val(_total);console.log(_total);})

?

運行結果：

如圖所示，每個input框失去焦點后，會自動將所有input框的值相加填入到“費用合計”框中，達成預期效果。

?

轉載于:https://www.cnblogs.com/BearLee/p/11078565.html

總結

以上是生活随笔為你收集整理的【JS】实时监控页面，input框数值自动求和的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。