【JS】實時監控頁面，input框數值自動求和

需求：

有一個頁面需要將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框的值相加填入到“費用合計”框中，達成預期效果。