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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
js实现滚动条滚动到某个位置便自动定位某个tr
Jan 20 Javascript
自动化测试读写64位操作系统的注册表
Aug 15 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Sep 29 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
js最实用string(字符串)类型的使用及截取与拼接详解
Apr 26 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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 静态变量与自定义常量的使用方法
2010/01/26 PHP
PHP输出一个等腰三角形的方法
2015/05/12 PHP
php mailer类调用远程SMTP服务器发送邮件实现方法
2016/03/04 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
Laravel框架集成UEditor编辑器的方法图文与实例详解
2019/04/17 PHP
IE6不能修改NAME问题的解决方法
2010/09/03 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
[52:14]VG vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[15:07]lgd_OG_m2_BP
2019/09/10 DOTA
Python和Java进行DES加密和解密的实例
2018/01/09 Python
对pandas进行数据预处理的实例讲解
2018/04/20 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python中字符串内置函数的用法总结
2018/09/13 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Django基础知识 web框架的本质详解
2019/07/18 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Dockers鞋官网:Dockers Shoes
2018/11/13 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
PHP面试题-$message和$$message的区别
2015/12/08 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
国际经济贸易专业推荐信
2013/11/06 职场文书
副处级干部考察材料
2014/05/17 职场文书
生产操作工岗位职责
2014/09/16 职场文书
2015年招聘工作总结
2014/12/12 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
天下第一关导游词
2015/02/06 职场文书
锅炉工岗位职责
2015/02/13 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
2015年七一建党节活动方案
2015/05/05 职场文书
MySQL分库分表与分区的入门指南
2021/04/22 MySQL