设为首页收藏本站

切换到宽版

PHPIN.NET»论坛 › 网页前端技术 › 网页综合特效 › JS计算多件物品价格变动

发新帖

查看: 7673|回复: 0

[jQuery/Js/AJAX] JS计算多件物品价格变动

469 主题	31 回帖	5569 积分

Rank: 9 Rank: 9 Rank: 9

积分: 5569

发消息

发表于 2014-2-18 08:02:55 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

<!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[i].onclick = function(){
var total=0;
for(var x=0; x<selectors.length; x++){
total += selectors[x].checked?parseInt(selectors[x].value):0;
}
document.getElementById('showResult').value = total+'元';
};
}
document.getElementById('selectAll').onclick = function(){
var total = 0;
for (var i=0; i<selectors.length; i++) {
selectors[i].checked = true;
total += parseInt(selectors[i].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>

复制代码

JS计算多件物品价格变动实例截图

JS计算多件物品价格变动实例截图

可以应用于多种用途。自己发挥。

回复

发新帖

|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-11-21 20:34

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表