js实现简单的购物车有图有代码


Posted in Javascript onMay 26, 2014

如图:
js实现简单的购物车有图有代码 
全选按钮的实现为:

<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="item" value="3000" />笔记本电脑:3000元<br /> 
<input type="checkbox" name="all" onclick="checkAll()" />全选<br /> 
<input type="button" value="获取总金额" onclick="getSum()" /> 
<span id="sum"></span>

最后的span标签是用来存放显示总金额的区域。

实现两个“全选”功能的代码是:

function checkAll() 
{ 
//var allNode = document.getElementsByName("all")[0]; 
//获取被点击的元素 
var allNode = event.srcElement; 
var item = document.getElementsByName("item"); 
for(var x=0;x<item.length;x++) 
{ 
item[x].checked = allNode.checked; 
} 
}

event.srcElement实现了对响应事件按钮的获取。

for循环将每个多选框修改checked属性。

计算总金额的方法为:

function getSum() 
{ 
var item = document.getElementsByName("item"); 
var sum = 0; 
for(var x=0;x<item.length;x++) 
{ 
if(item[x].checked) 
{ 
sum+=parseInt(item[x].value); 
} 
} 
var spanNode = document.getElementById("sum"); 
spanNode.innerHTML = (sum+"元").fontsize(7); 
}

将所有被选中的复选框的value值加起来。
Javascript 相关文章推荐
javascript学习笔记(八) js内置对象
Jun 19 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
Js冒泡事件详解及阻止示例
Mar 21 Javascript
jquery简单倒计时实现方法
Dec 18 Javascript
js获取页面及个元素高度、宽度的代码
Apr 26 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 #Javascript
单元选择合并变色示例代码
May 26 #Javascript
jquery实现的一个文章自定义分段显示功能
May 23 #Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 #Javascript
ie 7/8不支持trim的属性的解决方案
May 23 #Javascript
JQuery 控制内容长度超出规定长度显示省略号
May 23 #Javascript
jquery重复提交请求的原因浅析
May 23 #Javascript
You might like
PHP整合七牛实现上传文件
2015/07/03 PHP
PHPExcel在linux环境下导出报500错误的解决方法
2017/01/26 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
encode脚本和normal脚本混用的问题与解决方法
2007/03/08 Javascript
用js遍历 table的脚本
2008/07/23 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
2012/05/13 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
jQuery 获取/设置/删除DOM元素的属性以a元素为例
2014/05/23 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
jQuery弹出层插件popShow(改进版)用法示例
2017/01/23 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
Python2.x中str与unicode相关问题的解决方法
2015/03/30 Python
Python实现批量转换文件编码的方法
2015/07/28 Python
python制作爬虫并将抓取结果保存到excel中
2016/04/06 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python代码实现ID3决策树算法
2017/12/20 Python
python numpy 按行归一化的实例
2019/01/21 Python
详解Python3定时器任务代码
2019/09/23 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python数值基础知识浅析
2019/11/19 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
解决Tensorflow sess.run导致的内存溢出问题
2020/02/05 Python
使用Python获取当前工作目录和执行命令的位置
2020/03/09 Python
没编程基础可以学python吗
2020/06/17 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
写给爸爸的道歉信
2014/01/15 职场文书
培训协议书范本
2014/04/22 职场文书
5.12护士节活动总结
2015/02/10 职场文书
小学生学习保证书
2015/02/26 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2015年乡镇安全生产工作总结
2015/05/19 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
Win Server2016远程桌面如何允许多用户同时登录
2022/06/10 Servers