遇到一个问题，input框出现的个数不一定，是根据用户购买次数，从数据库中取到的。
所以input框的name,我就定义为moneybujian_加上流水号。
这样<input name="moneybujian_<?=$pi?>" type="text">
这个INPUT框的意思是填写本部件的价格。最下方还有个input框：
<input name="money" type="text" value="0">我希望在上面的多个input框（moneybujian_1、moneybujian_2 ……）填写金额后，将总价自动插入到下面的money框中。这个应该怎样用js写呢？
所以input框的name,我就定义为moneybujian_加上流水号。
这样<input name="moneybujian_<?=$pi?>" type="text">
这个INPUT框的意思是填写本部件的价格。最下方还有个input框：
<input name="money" type="text" value="0">我希望在上面的多个input框（moneybujian_1、moneybujian_2 ……）填写金额后，将总价自动插入到下面的money框中。这个应该怎样用js写呢？
<html lang="en">
<head>
<title>ss</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function getElementsByClassName(node,classname) {
if (node.getElementsByClassName) {
return node.getElementsByClassName(classname);
} else {
return (function getElementsByClass(searchClass,node) {
if ( node == null )
node = document;
var classElements = [],
els = node.getElementsByTagName("*"),
elsLen = els.length,
pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)"), i, j;
for (i = 0, j = 0; i < elsLen; i++) {
if ( pattern.test(els[i].className) ) {
classElements[j] = els[i];
j++;
}
}
return classElements;
})(classname, node);
}
}
function getTotal(idPress) {
var iTotal = 0;
var txt_input = getElementsByClassName(document,"txt_input");
for(var i = 0,iLen =txt_input.length;i<iLen;i++){
var iValue = txt_input[i].value;
if(iValue && !isNaN(iValue)){
iTotal += parseInt(iValue);
}
}
var txt_input = getElementsByClassName(document,txt_input);
document.getElementById("txtTotal").value = iTotal
}
</script>
</head>
<body>
<input type="text" class="txt_input" />
<input type="text" class="txt_input" />
<input type="text" class="txt_input" />
<input type="text" class="txt_input" />
<input type="text" class="txt_input" />
总价：<input type="text" id="txtTotal" />
<script type="text/javascript">
var txt_input = getElementsByClassName(document,"txt_input");
for(var i = 0,iLen =txt_input.length;i<iLen;i++){
if (window.attachEvent){ txt_input[i].attachEvent("onblur",getTotal);};
if (window.addEventListener){ txt_input[i].addEventListener("blur",getTotal,false)};
}
</script>
</body>
</html>
一个DEMO希望对你有用
<input name="moneybujian_2" class="tj" type="text" />
<input name="moneybujian_3" class="tj" type="text" />
<input name="moneybujian_4" class="tj" type="text" />
<input name="moneybujian_5" class="tj" type="text" />
........省略.........
<input name="money" type="text" />
//需要统计的input 添加 class="tj"
<script type="text/javascript">
$(function(){
$(".tj").blur(function(){
var i=0;
$.each($(".tj"),function(n,item){
i+=parseInt($(item).val(),10);
});
$("input[name='money']").val(i);
}).keyup(function(){
$(this).val($(this).val().replace(/[^\d.]/gi,""));
})
})
</script>
居然用jquery 哥你真爽快 哈哈
<html>
<head>
<title> Test </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery.1.4.2.src.js"></script>
<script type="text/javascript">
jQuery(function($) {
var count = function() {
var count = 0;
// 遍历以moneybujian开头的文本框
$("input[name^=moneybujian]").each(function() {
var num = parseInt($(this).val());
// 如果不是数字则忽略
if (isNaN(num)) return true; // return true相当于continue
count += num;
});
$("input[name=count]").val(count);
};
count(); // 文档加载完成时自动计算
$("button").click(function() { // 绑定点击事件
count(); // 点击按钮时计算
});
});
</script>
</head>
<body>
<p>单价: <input name="moneybujian_1" type="text" value="22" /></p>
<p>单价: <input name="moneybujian_2" type="text" value="35" /></p>
<p>单价: <input name="moneybujian_3" type="text" value="12" /></p>
<p>单价: <input name="moneybujian_4" type="text" value="18" /></p>
<p>单价: <input name="moneybujian_5" type="text" value="21" /></p>
<p>合计: <input name="count" type="text">
<p><button>计算</button></p>
</body>
</html>
<input name="moneybujian" type="text" />
<input name="moneybujian" type="text" />
<input name="moneybujian" type="text" />
<input name="moneybujian" type="text" />
........省略.........
<input name="money" type="text" />
//原生js也行，要统计的input统一名称
<script type="text/javascript">
var input=document.getElementsByName("moneybujian");
var money=document.getElementsByName("money")[0];
for(var i=0;i<input.length;i++){
input[i].onkeyup=function(){
this.value=this.value.replace(/[^\d.]/gi,"");
};
input[i].onblur=function(){
var n=0;
for(var i=0;i<input.length;i++){
var l=input[i].value;
if(l!="")n+=parseInt(l,10);
}
money.value=n;
}
}
</script>
<head>
<title> Test </title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function init() {
var count = 0;
// 遍历所有文本框
var list = document.getElementsByTagName("input");
for(var i = 0; i < list.length; i++) {
var name = list[i].getAttribute("name");
// 忽略不是moneybujian开头的
if (!/^moneybujian/.test(name)) continue;
var num = parseInt(list[i].value);
// 如果不是数字则忽略
if (isNaN(num)) continue;
count += num;
}
document.getElementsByName("count")[0].value = count;
}
</script>
</head>
<body onload="init()">
<p>单价: <input name="moneybujian_1" type="text" value="22" /></p>
<p>单价: <input name="moneybujian_2" type="text" value="35" /></p>
<p>单价: <input name="moneybujian_3" type="text" value="12" /></p>
<p>单价: <input name="moneybujian_4" type="text" value="18" /></p>
<p>单价: <input name="moneybujian_5" type="text" value="21" /></p>
<p>忽略: <input name="xxxxx" type="text" value="2000" /></p>
<p>合计: <input name="count" type="text">
</body>
</html>