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下通过的XMLHttpRequest发送请求的代码
Jun 28 Javascript
js获取IP和PcName(IE)在vs中可用
Aug 02 Javascript
jQuery插件实现控制网页元素动态居中显示
Mar 24 Javascript
javascript实现动态标签云
Oct 16 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
JS表单传值和URL编码转换
Mar 03 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
Vue常用的几个指令附完整案例
Nov 06 Javascript
js逆向解密之网络爬虫
May 30 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 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
网页的分页下标生成代码(PHP后端方法)
2016/02/03 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
php实现简易计算器
2020/08/28 PHP
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
2009/10/20 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
JS实现FLASH幻灯片图片切换效果的方法
2015/03/04 Javascript
jQuery中(function($){})(jQuery)详解
2015/07/15 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
2016/04/03 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
javascript正则表达式中分组详解
2016/07/17 Javascript
Bootstrap select多选下拉框实现代码
2016/12/23 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
BootStrapValidator初使用教程详解
2017/02/10 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
node puppeteer(headless chrome)实现网站登录
2018/05/09 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
Python中的多重装饰器
2015/04/11 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Spring实战之使用util:命名空间简化配置操作示例
2019/12/09 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
django 实现简单的插入视频
2020/04/07 Python
10个示例带你掌握python中的元组
2020/11/23 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
《海底世界》教学反思
2014/04/16 职场文书
应聘教师求职信范文
2015/03/20 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏