jQuery多个input求和的实现方法
作者:bea
本文实例讲述了jQuery多个input求和的实现方法。分享给大家供大家参考。具体实现方法如下: html页面代码如下: <td> <input name="add" id="add" readonly="readonly"/> </td> <pre name="code" class="html"><td> <input name="add1" id="add1"/> </td>
本文实例讲述了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程序设计有所帮助。
有用 | 无用
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程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- JS实现固定在右下角可展开收缩DIV层的方法
- JS仿iGoogle自定义首页模块拖拽特效的方法
- JS弹出可拖拽可关闭的div层完整实例
- AngularJS表单编辑提交功能实例
- javascript转换日期字符串为Date日期对象的方法
- jQuery动态修改超链接地址的方法
- jQuery实现contains方法不区分大小写的方法
- javascript获取元素离文档各边距离的方法
- jQuery点缩略图弹出层显示大图片
- Js控制滑轮左右滑动实例
- JavaScript函数作用域链分析
- JavaScript匿名函数用法分析
- js实现进度条的方法
- NodeJs基本语法和类型
- 动态加载js的方法汇总
- jQuery EasyUI datagrid实现本地分页的方法
- jQuery向后台传入json格式数据的方法
- 浅谈轻量级js模板引擎simplite
- js实现拖拽效果