我具有如图所示的形式
我需要的是,当我输入/更改金额值时,它会自动在底部计算总和
我也不希望添加任何字符...
谢谢
class="calc"
添加到每个金额输入字段,并将id="total"
添加到总计结果元素。jQuery代码:
$(document).ready(function(){
$('.calc').change(function(){
var total = 0;
$('.calc').each(function(){
if($(this).val() != '')
{
total += parseInt($(this).val());
}
});
$('#total').html(total);
});
})(jQuery);
和示例HTML代码:
<input type="text" class="calc" value=""> <input type="text" class="calc" value=""> <input type="text" class="calc" value=""> <input type="text" class="calc" value=""> <input type="text" class="calc" value=""> <span id="total"></span>
编辑这个效果更好:
$('.amount').keyup(function() {
var result = 0;
$('#total').attr('value', function() {
$('.amount').each(function() {
if ($(this).val() !== '') {
result += parseInt($(this).val());
}
});
return result;
});
});
您可以在这里尝试:http://jsfiddle.net/G5yaK/
$('.amount').change(function() { $('#total').attr('value', function() { var result = 0; $('.amount').each(function() { result += $(this).attr('value'); }); return result; }); });
您必须在输入字段中添加class="amount"
,并在最后一个字段中添加id="total"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="tr" lang="tr" dir="ltr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<style type="text/css">
<!--
html,body,div,span,h1,h2,h3,p,hr,br,img,form,input,ul,li,a {
margin:0;
padding:0;
border:0;
}
ul li {list-style:none;}
body {
font-family:Helvetica, Arial, Tahoma, sans-serif;
font-size:13px;
color:#444;
line-height:1.5em;
}
#kapsayici {
background:#fff;
margin:10px auto;
width:960px;
border:1px solid #dfdfdf;
min-height: 700px;
}
input {
border:1px solid #dfdfdf;
}
-->
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js" /></script>
<script type="text/javascript">
$.fn.fonkTopla = function() {
var toplam = 0;
this.each(function() {
var deger = fonkDeger($(this).val());
toplam += deger;
});
return toplam;
};
function fonkDeger(veri) {
return (veri != '') ? parseInt(veri) : 0;
}
$(document).ready(function(){
$('input[name^="fiyat"]').bind('keyup', function() {
$('#toplam').html( $('input[name^="fiyat"]').fonkTopla());
});
});
</script>
</head>
<body>
<div id="kapsayici">
<ul>
<li><input type="text" name="fiyat[]" /></li>
<li><input type="text" name="fiyat[]" /></li>
<li><input type="text" name="fiyat[]" /></li>
<li><input type="text" name="fiyat[]" /></li>
<li><input type="text" name="fiyat[]" /></li>
</ul>
Toplam: <span id="toplam"></span>
</div>
</body>
</html>