jQuery多個input求和的實現(xiàn)方法

更新時間：2015年02月12日 14:49:49 作者：LMJudas

這篇文章主要介紹了jQuery多個input求和的實現(xiàn)方法,涉及jQuery獲取input表單元素值及運算的相關(guān)技巧,需要的朋友可以參考下

本文實例講述了jQuery多個input求和的實現(xiàn)方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

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+$/ ;　//正整數(shù) 
      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的值時會出現(xiàn)頁面返回的情況，解決方法可參照前面一篇《JQuery實現(xiàn)防止退格鍵返回的方法》

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

您可能感興趣的文章:

jQuery
input

相關(guān)文章

jQuery學習筆記之jQuery構(gòu)建函數(shù)的7種方法
jQuery把所有的操作都包裝在一個jQuery()函數(shù)中，形成了統(tǒng)一(也是惟一)的操作入口，這為jQuery操作降低了門檻。那我們來看下具體構(gòu)造函數(shù)的“七種武器”吧。
2014-06-06
超級酷和最實用的jQuery實例收集(20個)
二十個超級酷和最實用的jQuery實例，對于使用和學習jquery的朋友是個不錯的參考與學習資料。
2010-04-04
jquery實現(xiàn)checkbox 全選/全不選的通用寫法
本篇文章主要是對jquery實現(xiàn)checkbox 全選/全不選的通用寫法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
Jquery實現(xiàn)Div上下移動示例
這篇文章主要介紹了Jquery如何實現(xiàn)Div上下移動,需要的朋友可以參考下
2014-04-04
jquery實現(xiàn)刪除一個元素后面的所有元素功能
這篇文章主要介紹了jquery實現(xiàn)刪除一個元素后面的所有元素功能，操作簡單方便，感興趣的小伙伴們可以參考一下
2015-12-12
仿中關(guān)村在線首頁彈出式廣告插件(jQuery版)
仿中關(guān)村在線首頁彈出式廣告插件(jQuery版) ，需要的朋友可以參考下
2012-05-05
jquery插件實現(xiàn)懸浮的菜單
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)懸浮的菜單，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
Jquery+ajax+JAVA(servlet)實現(xiàn)下拉菜單異步取值
這篇文章主要介紹了Jquery+ajax+JAVA(servlet)實現(xiàn)下拉菜單異步取值的相關(guān)資料,需要的朋友可以參考下
2016-03-03
jQuery中讀取json文件示例代碼
json文件是一種輕量級的數(shù)據(jù)交互格式。一般在jquery中使用getJSON()方法讀取，具體示例代碼如下，感興趣的朋友可以參考下哈，希望可以幫助到你
2013-05-05
jquery中change()用法實例分析
這篇文章主要介紹了jquery中change()用法,實例分析了change的功能、定義及具體的使用技巧,非常具有實用價值,需要的朋友可以參考下
2015-02-02