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下写一个事件队列操作函数
Jul 19 Javascript
JQuery开发的数独游戏代码
Oct 29 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
AngularJS基础 ng-copy 指令实例代码
Aug 01 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
常用原生js自定义函数总结
Nov 20 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
vue使用websocket的方法实例分析
Jun 22 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
Sep 18 Javascript
浅谈layui 绑定form submit提交表单的注意事项
Oct 25 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
帅气的琦玉老师
2020/03/02 日漫
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
JavaScript 撑出页面文字换行
2009/06/15 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
2010/06/11 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
JQUERY 获取IFrame中对象及获取其父窗口中对象示例
2013/08/19 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jQuery CSS3相结合实现时钟插件
2016/01/08 Javascript
微信小程序 wxapp内容组件 progress详细介绍
2016/10/31 Javascript
Nodejs中Express 常用中间件 body-parser 实现解析
2017/05/22 NodeJs
React 路由懒加载的几种实现方案
2018/10/23 Javascript
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python字符串处理实例详解
2017/05/18 Python
使用python编写udp协议的ping程序方法
2018/04/22 Python
Django中的用户身份验证示例详解
2019/08/07 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Python自动创建Excel并获取内容
2020/09/16 Python
python爬取音频下载的示例代码
2020/10/19 Python
HTML5 canvas基本绘图之绘制矩形
2016/06/27 HTML / CSS
微信端html5页面调用分享接口示例
2018/03/14 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
如何掌握自荐信格式呢
2013/11/19 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
交通事故协议书范文
2014/10/23 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
企业财务经理岗位职责
2015/04/08 职场文书
南京南京观后感
2015/06/02 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers