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实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
js中split和replace的用法实例
Feb 28 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
jQuery实现的自定义弹出层效果实例详解
Sep 04 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
jQuery实现高级检索功能
May 28 jQuery
小程序外卖订单界面的示例代码
Dec 30 Javascript
vue data有值,但是页面{{}} 取不到值的解决
Nov 09 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 session劫持和防范的方法
2013/11/12 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
如何编写高质量JS代码
2014/12/28 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
2015/03/30 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
2018/07/13 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
vue中的适配px2rem示例代码
2018/11/19 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python中apply函数的用法实例教程
2014/07/31 Python
python查找指定具有相同内容文件的方法
2015/06/28 Python
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
深入理解python中的select模块
2017/04/23 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
python如何导出微信公众号文章方法详解
2020/08/31 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
泰国最新活动和优惠:Megatix
2020/05/07 全球购物
物业管理毕业生的自我评价
2014/02/17 职场文书
家长写给孩子的评语
2014/04/18 职场文书
小学生环保演讲稿
2014/04/25 职场文书
学校就业推荐信范文
2014/05/19 职场文书
2014年学校德育工作总结
2014/12/05 职场文书
小学优秀班主任材料
2014/12/17 职场文书
初中运动会前导词
2015/07/20 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Python中的pprint模块
2021/11/27 Python