js 实时监听input中值的变化，值改变时自动计算填充到另一个input中

QQ玉

于 2017-11-29 16:33:19 发布

阅读量3w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qinyf2015/article/details/78666633

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个简单的前端实现方案，用于实时计算用户输入的应收现金金额，并根据预设折扣自动更新实际收款金额。此功能通过监听输入框变化并进行计算来完成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table style="border-collapse:separate; border-spacing:0px 10px;">
 <tr>
  <td align="right">应收现金：</td>
  <td><input id="accountReceivable" autoComplete='off'></td>
  <td>元，折扣：</td>
  <td><input id="vipdiscount"  readonly="true"></td>
  <td align="right">实收：</td>
  <td><input id="receipts" readonly="true"></td>
  <td>元 </td>
  <td>消费类型：<select id="conType"><option value="1" >报名费</option><option value="2" >酒水零食费</option></select></td>
  <td><a id="btnSend" class="easyui-linkbutton">提交</a></td>
									   
 </tr>
</table>

$(function(){  

	$('#accountReceivable').bind('input propertychange', function() {  
		var a = $('#accountReceivable').val();
		var b = $('#vipdiscount').val();
		var sum= a * b;
		
	    $('#receipts').val(sum);  
	}); 
  
})

效果图：应收现金每输入一个数会自动计算并填充到实收的输入框。css样式代码我就不贴出来了，以上代码能实现实时计算功能就可以了