jquery--实现数字的自动累加

最新推荐文章于 2023-09-11 07:57:34 发布

若♡

最新推荐文章于 2023-09-11 07:57:34 发布

阅读量635

点赞数

文章标签： jquery javascript html

本文链接：https://blog.csdn.net/weixin_67271870/article/details/127704323

版权

原理：用jquery取得叠加的数据，将其放进数组里面，最后一个一个读取出来，实现叠加。

1、这个方法适合于对个input

$('input[name="number"]').live('blur',function(){
   var valueArr= $('input[name="number"]');
   var sumValue=0;
   if(valueArr.size()>0||valueArr != null){
       for (var i=0;i<valueArr.size();i++ )
        {    
            //alert(valueArr[i].value);
            if(isNaN(valueArr[i].value)||valueArr[i].value==null||valueArr[i].value==""){
               sumValue +=0;
            }
            else{
               //alert(valueArr[i].value);
               sumValue +=parseFloat(valueArr[i].value);//强制转换为数字
            }
            
        }
   }
   if(sumValue>0){
        $('#test').val(parseInt(sumValue));
   }
   else{
       $('#test').val(0);
   }
   
});

2、在上面方法的启示下，最近弄了一个checkbox的的自动累加。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>测试</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">
    $(function(){
		var chkItem = $('input[name=chkItem]');
		chkItem.click(function(){
			$('#sumid').html(sum());			
			});
		});
		
		
		
		/**
		*@功能 计算总和
		*@param null
		*@return int 	
		**/
		function sum(){
			var valueArr= $('input[name=chkItem]');  
			var sumValue=0;  
			valueArr.each(function(index, element) {
                if($(this).is(":checked")){
					if(isNaN(valueArr[index].value)||valueArr[index].value==null||valueArr[index].value==""){  
					   sumValue +=0;  
					}else{  
					   sumValue +=parseFloat(valueArr[index].value);//强制转换为数字  
					}
					
					}
            });
					
			if(sumValue>0){  
				sumValue = parseInt(sumValue);  
			}  
			else{  
			   sumValue = 0;  
			}  
			return sumValue;
		}
</script>

<style type="text/css">
</style>
</head>
    <body>

        <input name="chkItem" type="checkbox" value="1" />1
        <input name="chkItem" type="checkbox" value="2" />2
        <input name="chkItem" type="checkbox" value="3" />3
        <br />
        总和：<spam id="sumid"></span>


    </body>
</html>