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 form action动态修改方法
Nov 04 Javascript
我的javascript 函数链之演变
Apr 07 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
Aug 08 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
jQuery中fadeOut()方法用法实例
Dec 24 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
纯js模仿windows系统日历
Feb 04 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
create-react-app构建项目慢的解决方法
Mar 14 Javascript
微信小程序上传图片功能(附后端代码)
Jun 19 Javascript
js实现图片局部放大效果详解
Mar 18 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
Cappuccino 卡布其诺咖啡之制作
2021/03/03 冲泡冲煮
php实现ping
2006/10/09 PHP
Yii结合CKEditor实现图片上传功能
2014/06/13 PHP
简单谈谈php中ob_flush和flush的区别
2014/11/27 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
PHP 实现浏览记录并按日期分组
2017/05/11 PHP
在 Laravel 6 中缓存数据库查询结果的方法
2019/12/11 PHP
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
关于jQuery对象数据缓存Cache原理以及jQuery.data详解
2013/04/07 Javascript
3种不同方式的焦点图轮播特效分享
2013/10/30 Javascript
JS实现仿QQ效果的三级竖向菜单
2015/09/25 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
js代码实现下拉菜单【推荐】
2016/12/15 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
基于nodejs 的多页面爬虫实例代码
2017/05/31 NodeJs
使用Vue制作图片轮播组件思路详解
2018/03/21 Javascript
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
Python中的Numeric包和Numarray包使用教程
2015/04/13 Python
python读取TXT到数组及列表去重后按原来顺序排序的方法
2015/06/26 Python
Python字符编码判断方法分析
2016/07/01 Python
django数据库migrate失败的解决方法解析
2018/02/08 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
Python循环中else,break和continue的用法实例详解
2019/07/11 Python
基于python3监控服务器状态进行邮件报警
2019/10/19 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
AMAVII眼镜官网:时尚和设计师太阳镜
2019/05/05 全球购物
大学专科生推荐信范文
2013/11/23 职场文书
竞选部长演讲稿
2014/04/26 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
使用JS前端技术实现静态图片局部流动效果
2022/08/05 Javascript
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS