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获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
查找iframe里元素的方法可传参
Sep 11 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
JS实现跟随鼠标闪烁转动色块的方法
Feb 26 Javascript
js基于cookie记录来宾姓名的方法
Jul 19 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
微信小程序如何获取用户手机号
Jan 26 Javascript
angularJs 表格添加删除修改查询方法
Feb 27 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
使用ng-packagr打包Angular的方法示例
Sep 21 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
Nov 11 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使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
JQuery 将元素显示在屏幕的中央的代码
2010/02/27 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
基于JavaScript实现Json数据根据某个字段进行排序
2015/11/24 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Python内置函数Type()函数一个有趣的用法
2015/02/18 Python
python3实现短网址和数字相互转换的方法
2015/04/28 Python
Django框架中方法的访问和查找
2015/07/15 Python
Python文件处理
2016/02/29 Python
Python编写电话薄实现增删改查功能
2016/05/07 Python
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
Python多进程方式抓取基金网站内容的方法分析
2019/06/03 Python
python调用动态链接库的基本过程详解
2019/06/19 Python
python 反编译exe文件为py文件的实例代码
2019/06/27 Python
《月光启蒙》教学反思
2014/03/01 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
政风行风评议整改方案
2014/09/15 职场文书
学籍证明模板
2014/11/21 职场文书
李白故里导游词
2015/02/12 职场文书
党风廉正建设个人工作总结
2015/03/06 职场文书
2015年售后服务工作总结
2015/04/25 职场文书
宪法宣传标语100条
2019/10/15 职场文书
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL