实时监控input的val进行求和

最新推荐文章于 2025-06-22 14:26:33 发布

在路上_a

最新推荐文章于 2025-06-22 14:26:33 发布

阅读量872

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/abc_26zm/article/details/87892716

本文介绍了一种使用jQuery实现实时动态求和的方法。通过监听输入框的键盘抬起事件，即时更新总和显示，确保数值计算的准确性。文章提供了完整的代码示例，包括加法函数的实现，以解决浮点数相加时的精度问题。

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

实时监控input的val进行求和

也可做简单修改，完成多个动态input求和
话不多说，上代码

<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

<div style="width:300px">
	总和：<input id="total" disabled="disabled" value="99"/>
	<hr/>
	<p class="this_container">
		输入框1：<input name="money" value="10.01">
	</p>
	<p class="this_container">
		输入框2：<input name="money" value="10.03">
	</p>
	<p class="this_container">
		输入框3：<input name="money" value="1.06">
	</p>
</div>
<script>
	/* 版本1：离开输入框触发 */
	/*$(function(){
		$('.this_container input[name="money"]').blur('input propertychange',function(){
		var sum = 0;
			$(".this_container input[name='money']").each(function(){
				//这样调用自定义的相加方法
				value= $(this).val();
				sum = accAdd(sum, value);
				//或者通过自定义的Number属性add调用自定义方法
				//var value = Number($(this).val());
				//sum  = value.add(sum);
			});
			console.log(sum);
			$('input[disabled="disabled"]').val( sum );
		});
	});*/
	
	/* 方法2：进入页面计算总和；并且监听输入框动态，实时计算总和 */
	$(function(){
		function getTotal(){
			var sum = 0;
			$('.this_container input[name="money"]').each(function(){
				//这样调用自定义的相加方法
				value= this.value;
				sum = accAdd(sum, value);
				
				//或者通过自定义的Number属性add调用自定义方法
				/*var value = Number($(this).val());
				sum  = value.add(sum);*/
			});
			$('input[disabled="disabled"]').val( sum );
		}
		$('.this_container input[name="money"]').on("keyup", getTotal).trigger('keyup');
	});
	
	/**
	 ** 加法函数，用来得到精确的加法结果
	 ** 说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。
	 ** 调用：accAdd(arg1,arg2)
	 ** 返回值：arg1加上arg2的精确结果
	 **/
	function accAdd(arg1, arg2) {
		var r1, r2, m, c;
		try {
			r1 = arg1.toString().split(".")[1].length;
		}
		catch (e) {
			r1 = 0;
		}
		try {
			r2 = arg2.toString().split(".")[1].length;
		}
		catch (e) {
			r2 = 0;
		}
		c = Math.abs(r1 - r2);
		m = Math.pow(10, Math.max(r1, r2));
		if (c > 0) {
			var cm = Math.pow(10, c);
			if (r1 > r2) {
				arg1 = Number(arg1.toString().replace(".", ""));
				arg2 = Number(arg2.toString().replace(".", "")) * cm;
			} else {
				arg1 = Number(arg1.toString().replace(".", "")) * cm;
				arg2 = Number(arg2.toString().replace(".", ""));
			}
		} else {
			arg1 = Number(arg1.toString().replace(".", ""));
			arg2 = Number(arg2.toString().replace(".", ""));
		}
		return (arg1 + arg2) / m;
	}
	 
	//给Number类型增加一个add方法，调用起来更加方便。
	Number.prototype.add = function (arg) {
		return accAdd(arg, this);
	}
</script>