设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 653|回复: 0

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

[复制链接]

374

主题

381

帖子

2554

积分

管理员

Rank: 9Rank: 9Rank: 9

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

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

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>JS计算多件物品价格变动</title>
  6. <style type="text/css">
  7. .jieguo { border:none;}
  8. </style>
  9. <script language="javascript" type="text/javascript">
  10. window.onload = function(){
  11. var selectors = document.getElementsByName('selectSize');
  12. for (var i=0; i<selectors.length; i++) {
  13. selectors[i].onclick = function(){
  14. var total=0;
  15. for(var x=0; x<selectors.length; x++){
  16. total += selectors[x].checked?parseInt(selectors[x].value):0;
  17. }
  18. document.getElementById('showResult').value = total+'元';
  19. };
  20. }
  21. document.getElementById('selectAll').onclick = function(){
  22. var total = 0;
  23. for (var i=0; i<selectors.length; i++) {
  24. selectors[i].checked = true;
  25. total += parseInt(selectors[i].value);
  26. }
  27. document.getElementById('showResult').value = total+'元';
  28. }
  29. };
  30. </script>
  31. </head>
  32. <body>
  33. 实例展示效果:
  34. <div>
  35. <input name="selectSize" type="checkbox" value="10" />10元
  36. <input name="selectSize" type="checkbox" value="20" />20元
  37. <input name="selectSize" type="checkbox" value="10" />10元
  38. &nbsp;&nbsp;计算结果:<input id="showResult" type="text" class="jieguo" value="0元" />
  39. <input id="selectAll" type="button" value="全选" />
  40. </div>
  41. </body>
  42. </html>
复制代码

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

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

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


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2016-12-3 23:35

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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