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 相关文章推荐
基于JQuery的asp.net树实现代码
Nov 30 Javascript
js实现的map方法示例代码
Jan 13 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
JavaScript中的Function函数
Aug 27 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
JS div匀速移动动画与变速移动动画代码实例
Mar 26 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
Vue  webpack 项目自动打包压缩成zip文件的方法
Jul 24 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
VUE 动态组件的应用案例分析
Dec 02 Javascript
详解JavaScript自定义函数
Jul 29 Javascript
封装 axios+promise通用请求函数操作
Aug 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实现快速排序法函数代码
2012/08/27 PHP
PHP fopen()和 file_get_contents()应用与差异介绍
2014/03/19 PHP
PHP 快速排序算法详解
2014/11/10 PHP
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
Smarty环境配置与使用入门教程
2016/05/11 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
PHP简单实现解析xml为数组的方法
2018/05/02 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
谈谈Jquery ajax中success和complete有哪些不同点
2015/11/20 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
浅谈JS原生Ajax,GET和POST
2016/06/08 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
js放大镜放大购物图片效果
2017/01/18 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
js实现上传并压缩图片效果
2018/01/10 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python对列表排序的方法实例分析
2015/05/16 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python 备份程序代码实现
2017/03/06 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
HTML5+CSS3实现机器猫
2016/10/17 HTML / CSS
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
会计系个人求职信范文分享
2013/12/20 职场文书
教学实验楼管理制度
2014/02/01 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript