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 CSS操作方法集合
Oct 31 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件
Aug 24 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
jquery绑定原理 简单解析与实现代码分享
Sep 06 Javascript
Jquery原生态实现表格header头随滚动条滚动而滚动
Mar 18 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
canvas仿iwatch时钟效果
Mar 06 Javascript
详解vue表单验证组件 v-verify-plugin
Apr 19 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
Nov 01 Javascript
JS实现判断移动端PC端功能
Feb 21 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的cms
2010/12/19 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
为Plesk PHP7启用Oracle OCI8扩展方法总结
2019/03/29 PHP
HTML 自动伸缩的表格Table js实现
2009/04/01 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jquery禁用右键示例
2014/04/28 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
浅析AMD CMD CommonJS规范--javascript模块化加载学习心得总结
2016/03/16 Javascript
纯js实现手风琴效果
2020/04/17 Javascript
使用jQuery Rotare实现微信大转盘抽奖功能
2016/06/20 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
详解利用nodejs对本地json文件进行增删改查
2019/09/20 NodeJs
初步理解Python进程的信号通讯
2015/04/09 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python实现求特征选择的信息增益
2018/12/18 Python
如何使用Flask-Migrate拓展数据库表结构
2019/07/24 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
css3使用animation属性实现炫酷效果(推荐)
2020/02/04 HTML / CSS
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
Zipadee-Zip襁褓过渡毯:Sleeping Baby
2018/12/30 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
教师个人自我评价范文
2014/04/13 职场文书
《灰椋鸟》教学反思
2014/04/27 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
报案材料怎么写
2015/05/25 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
mysql的Buffer Pool存储及原理
2022/04/02 MySQL
mysql 子查询的使用
2022/04/28 MySQL