[JS] real-time monitoring page, input box value AutoSum

demand:

There needs to be a page each cost input box filled automatically be added to add to the "total cost" in.

solution:

Using jquery blur practice, the cost of each detected Input box loses focus, all the input values ​​summed box, and then written to the "total costs" box

Code:

HTML code is shown below

                    <!--管理费-->
                    <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 code shown below

//     payments received lost focus event 
    $ ( 'Bill-COUNT.') Blur (. Function () {
         var _Total = 0 ;
        $('.bill-count').each(function(){
            _total += Number(this.value);
        })
        $('#fee-total').val(_total);
        console.log(_total);
    })

 

operation result:

As shown, after each input box loses focus, automatically adding the values ​​of all input box to fill in the "total cost" box, and achieve the desired effect.