JS计算多件物品价格变动
<!doctype html><html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<title>JS计算多件物品价格变动</title>
<style type="text/css">
.jieguo { border:none;}
</style>
<script language="javascript" type="text/javascript">
window.onload = function(){
var selectors = document.getElementsByName('selectSize');
for (var i=0; i<selectors.length; i++) {
selectors.onclick = function(){
var total=0;
for(var x=0; x<selectors.length; x++){
total += selectors.checked?parseInt(selectors.value):0;
}
document.getElementById('showResult').value = total+'元';
};
}
document.getElementById('selectAll').onclick = function(){
var total = 0;
for (var i=0; i<selectors.length; i++) {
selectors.checked = true;
total += parseInt(selectors.value);
}
document.getElementById('showResult').value = total+'元';
}
};
</script>
</head>
<body>
实例展示效果：
<div>
<input name="selectSize" type="checkbox" value="10" />10元
<input name="selectSize" type="checkbox" value="20" />20元
<input name="selectSize" type="checkbox" value="10" />10元
计算结果：<input id="showResult" type="text" class="jieguo" value="0元" />
<input id="selectAll" type="button" value="全选" />
</div>
</body>
</html>
可以应用于多种用途。自己发挥。
页:
[1]