龙岗做网站公司szaow,品牌网站建设公司哪好,设计官网有哪些,江苏省住房和城乡建设厅官网需求#xff1a; 有一个页面需要将input框填入的各个费用自动相加#xff0c;添加到“合计费用”里。 解决方案#xff1a; 使用jquery的blur实践#xff0c;每个费用的Input框检测到失去焦点时#xff0c;将所有的input框数值相加求和#xff0c;然后写入到“合计费用”…需求 有一个页面需要将input框填入的各个费用自动相加添加到“合计费用”里。 解决方案 使用jquery的blur实践每个费用的Input框检测到失去焦点时将所有的input框数值相加求和然后写入到“合计费用”框中 代码 HTML代码如下所示 !--管理费--div classform-grouplabel classcol-xs-2 control-label管理费/labeldiv classinput-group col-xs-8input typenumber classform-control bill-count namefee_gl autocompleteoff/div/div!--光纤费--div classform-grouplabel classcol-xs-2 control-label光纤费/labeldiv classinput-group col-xs-8input typenumber step0.01 classform-control bill-count namefee_gx autocompleteoff/div/div!--税金--div classform-grouplabel classcol-xs-2 control-label税金/labeldiv classinput-group col-xs-8input typenumber step0.01 classform-control bill-count namefee_sj autocompleteoff/div/div!--社保--div classform-grouplabel classcol-xs-2 control-label社保/labeldiv classinput-group col-xs-8input typenumber step0.01 classform-control bill-count namefee_sb autocompleteoff/div/div!--公积金--div classform-grouplabel classcol-xs-2 control-label公积金/labeldiv classinput-group col-xs-8input typenumber step0.01 classform-control bill-count namefee_gjj autocompleteoff/div/div!--残障金--div classform-grouplabel classcol-xs-2 control-label残障金/labeldiv classinput-group col-xs-8input typenumber step0.01 classform-control bill-count namefee_czj autocompleteoff/div/div!--费用合计--div classform-grouplabel classcol-xs-2 control-label费用合计/labeldiv classinput-group col-xs-8input typenumber disabled idfee-total classform-control namefee_total value0 autocompleteoff/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
