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 禁止选择功能实现代码(兼容IE/Firefox)
Apr 23 Javascript
javascript动态加载二
Aug 22 Javascript
用innerhtml提高页面打开速度的方法
Aug 02 Javascript
JS实现探测网站链接的方法【测试可用】
Nov 08 Javascript
数组Array的排序sort方法
Feb 17 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
Angular 项目实现国际化的方法
Jan 08 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 jQuery
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
JS实现动态星空背景效果
Nov 01 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 Javascript
Element实现表格嵌套、多个表格共用一个表头的方法
May 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery html()方法使用不了无法显示内容的问题
2014/08/06 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
bootstrap表单示例代码分享
2017/05/18 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
一个小时快速搭建微信小程序的方法步骤
2019/04/15 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
2021/02/26 Vue.js
Python中让MySQL查询结果返回字典类型的方法
2014/08/22 Python
在Django的URLconf中使用命名组的方法
2015/07/18 Python
如何在python中使用selenium的示例
2017/12/26 Python
Python装饰器用法实例总结
2018/05/26 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
Pandas数据分析的一些常用小技巧
2021/02/07 Python
生产车间主任的个人自我鉴定
2013/10/25 职场文书
门卫班长岗位职责
2013/12/15 职场文书
师范生自荐信模板
2014/05/28 职场文书
优秀党员事迹材料
2014/12/18 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android