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版代码高亮
Jun 26 Javascript
ExtJs的Date格式字符代码
Dec 30 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
jQuery当鼠标悬停时放大图片的效果实例
Jul 03 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
jQuery动态生成表格及右键菜单功能示例
Jan 13 Javascript
使用react render props实现倒计时的示例代码
Dec 06 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
vue项目接口域名动态获取操作
Aug 13 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
星际RPG字典
2020/03/04 星际争霸
PHP中each与list用法分析
2016/01/08 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
一端时间轮换的广告
2006/06/26 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
javascript中indexOf技术详解
2015/05/07 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
Angularjs中的页面访问权限怎么设置
2016/11/11 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
angularJS开发注意事项
2018/05/26 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
Python语法快速入门指南
2015/10/12 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
TF-IDF与余弦相似性的应用(二) 找出相似文章
2017/12/21 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
深入浅析Python传值与传址
2018/07/10 Python
python 字符串常用方法汇总详解
2019/09/16 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
对CSS3选择器的研究(详解)
2016/09/16 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
学生就业推荐信
2013/11/13 职场文书
项目合作计划书
2014/01/09 职场文书
操行评语大全
2014/04/30 职场文书
党员检讨书
2014/10/13 职场文书
涪陵白鹤梁导游词
2015/02/09 职场文书
2016年“我们的节日·清明节”活动总结
2016/04/01 职场文书