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 相关文章推荐
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
jQuery - css() 方法示例详解
Jan 16 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
Oct 09 jQuery
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
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
JS实现在线ps功能详解
2019/07/31 Javascript
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Django在win10下的安装并创建工程
2017/11/20 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python实现批量注册网站用户的示例
2019/02/22 Python
python线程信号量semaphore使用解析
2019/11/30 Python
使用py-spy解决scrapy卡死的问题方法
2020/09/29 Python
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
大学新生军训个人的自我评价
2013/10/03 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
2014年教师培训的自我评价
2014/01/03 职场文书
八年级音乐教学反思
2014/01/09 职场文书
《尊严》教学反思
2014/02/11 职场文书
甲乙双方合作协议书
2014/10/13 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
财产保全担保书
2015/01/20 职场文书
学校百日安全活动总结
2015/05/07 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
python 实现的截屏工具
2021/05/08 Python
python 爬取天气网卫星图片
2021/06/07 Python
SpringBoot快速入门详解
2021/07/21 Java/Android