jQuery多个input求和的实现方法


Posted in Javascript onFebruary 12, 2015

本文实例讲述了jQuery多个input求和的实现方法。分享给大家供大家参考。具体实现方法如下:

html页面代码如下:

<td> 
  <input name="add" id="add" readonly="readonly"/> 
</td> 
<pre name="code" class="html"><td> 
  <input name="add1" id="add1"/> 
</td> 
<td> 
  <input name="add2" id="add2"/> 
</td>

jQuery部分代码如下:

<script> 
$("input[id^='add']").change(function(){ 
    var sum=0; 
    $("input[id^='add']").each(function(){ 
      var r = /^-?\d+$/ ; //正整数 
      if($(this).val() !=''&&!r.test($(this).val())){ 
       $(this).val("");  //正则表达式不匹配置空 
      }else if($(this).val() !=''){ 
       sum+=parseInt($(this).val()); 
      } 
      document.getElementById("add").value=sum; 
      }); 
    }); 
</script>

由于input属性为readonly,所以在浏览器中按Backspace删除该input的值时会出现页面返回的情况,解决方法可参照前面一篇《JQuery实现防止退格键返回的方法》

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
类似框架的js代码
Nov 09 Javascript
JavaScript事件列表解说
Dec 22 Javascript
javascript 硬盘序列号+其它硬件信息
Dec 23 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
Nov 03 Javascript
jQuery中removeData()方法用法实例
Dec 27 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
Node.js API详解之 querystring用法实例分析
Apr 29 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 Javascript
JQuery实现防止退格键返回的方法
Feb 12 #Javascript
JavaScript自定义数组排序方法
Feb 12 #Javascript
zepto.js中tap事件阻止冒泡的实现方法
Feb 12 #Javascript
后台获取ZTREE选中节点的方法
Feb 12 #Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 #Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 #Javascript
javascript编写实用的省市选择器
Feb 12 #Javascript
You might like
PHP中冒号、endif、endwhile、endfor使用介绍
2010/04/28 PHP
浅析is_writable的php实现
2013/06/18 PHP
thinkPHP下的widget扩展用法实例分析
2015/12/26 PHP
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
2009/10/29 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
jQuery aminate方法定位到页面具体位置
2013/12/26 Javascript
javascript读写json示例
2014/04/11 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
Jquery注册事件实现方法
2015/05/18 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
初识简单却不失优雅的Vue.js
2016/09/12 Javascript
jQuery中extend函数简单用法示例
2017/10/11 jQuery
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python 模拟登陆的两种实现方法
2017/08/10 Python
python自动化报告的输出用例详解
2018/05/30 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
Python基于xlutils修改表格内容过程解析
2020/07/28 Python
国际鲜花速递专家:Floraqueen
2016/11/24 全球购物
逻辑链路控制协议
2016/10/01 面试题
ShellScript面试题一则-ShellScript编程
2014/06/24 面试题
教学质量评估实施方案
2014/03/17 职场文书
卖车协议书范例
2014/09/16 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android