jQuery多个input求和的实现方法

最新推荐文章于 2025-06-26 11:35:51 发布

原创最新推荐文章于 2025-06-26 11:35:51 发布 · 3.3k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用jQuery计算多个input值的求和方法，包括HTML页面结构和jQuery代码示例。同时，针对输入框值被删除导致页面回退的问题，提供了相关解决策略。

本文实例讲述了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>