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各种复制代码收集
Sep 20 Javascript
javascript实现日期按月份加减
May 15 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
IE下JS保存图片的简单实例
Jul 15 Javascript
Bootstrap导航条学习使用(二)
Feb 08 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Angular模版驱动表单的使用总结
May 05 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
Vue表单输入绑定的示例代码
Nov 01 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
Mar 23 Javascript
Layer UI表格列日期格式化及取消自动填充日期的实现方法
May 10 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 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
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
php时区转换转换函数
2014/01/07 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
JS弹出对话框返回值代码(asp.net后台)
2010/12/28 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
表单验证正则表达式实例代码详解
2015/11/09 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
原生 JS Ajax,GET和POST 请求实例代码
2016/06/08 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
Angular工具方法学习
2016/12/26 Javascript
深入浅出理解JavaScript高级定时器原理与用法
2018/08/02 Javascript
解决vuex刷新状态初始化的方法实现
2019/08/15 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
学前端,css与javascript重难点浅析
2020/06/11 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[57:53]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#3OG VS VP
2016/03/03 DOTA
python3访问sina首页中文的处理方法
2014/02/24 Python
python快速建立超简单的web服务器的实现方法
2018/02/17 Python
python绘制热力图heatmap
2020/03/23 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
Python ArgumentParse的subparser用法说明
2020/04/20 Python
matplotlib 多个图像共用一个colorbar的实现示例
2020/09/10 Python
详解python程序中的多任务
2020/09/16 Python
Python内置函数及功能简介汇总
2020/10/13 Python
HTML5 CSS3打造相册效果附源码下载
2014/06/16 HTML / CSS
英国女装网上商店:I Saw It First
2018/10/18 全球购物
求职简历的自我评价怎样写好
2013/10/07 职场文书
推荐信格式范文
2014/05/09 职场文书
大学生求职自荐信
2015/03/24 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
外科护士长工作总结
2015/08/12 职场文书
golang import自定义包方式
2021/04/29 Golang