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 相关文章推荐
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
在JQuery dialog里的服务器控件 事件失效问题
Dec 08 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
jQuery的图片滑块焦点图插件整理推荐
Dec 07 Javascript
js中split和replace的用法实例
Feb 28 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
对TypeScript库进行单元测试的方法
Jul 18 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
js 执行上下文和作用域的相关总结
Feb 08 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 curl参数的详解
2013/06/17 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
Linux操作系统安装LAMP环境
2015/06/26 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
PHP如何防止XSS攻击与XSS攻击原理的讲解
2019/03/22 PHP
写了一个layout,拖动条连贯,内容区可为iframe
2007/08/19 Javascript
javascript 贪吃蛇实现代码
2008/11/22 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
Angularjs上传文件组件flowjs功能
2017/08/07 Javascript
详解webpack2+React 实例demo
2017/09/11 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
2017/09/21 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
vue 扩展现有组件的操作
2020/08/14 Javascript
pandas中去除指定字符的实例
2018/05/18 Python
python版DDOS攻击脚本
2019/06/12 Python
python中调试或排错的五种方法示例
2019/09/12 Python
Python生成器generator原理及用法解析
2020/07/20 Python
html5构建触屏网站之网站尺寸探讨
2013/01/07 HTML / CSS
诺心蛋糕官网:LE CAKE
2018/08/25 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
环境工程专业自荐信范文
2014/06/24 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
英语课外活动总结
2014/08/27 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
求职简历自我评价范文
2015/03/10 职场文书
总经理岗位职责范本
2015/04/01 职场文书
员工离职通知函
2015/04/25 职场文书
于丹讲座视频观后感
2015/06/15 职场文书