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面向对象的方式实现的弹出层效果代码
Jan 28 Javascript
js 通用订单代码
Dec 23 Javascript
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
c#+jquery实现获取radio和checkbox的值
Sep 12 Javascript
使用jQueryMobile实现滑动翻页效果的方法
Feb 04 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
JavaScript:Date类型全面解析
May 19 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
js HTML DOM EventListener功能与用法实例分析
Apr 27 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
基于mysql的论坛(1)
2006/10/09 PHP
php修改上传图片尺寸的方法
2015/04/14 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
javascript 冒号 使用说明
2009/06/06 Javascript
通过下拉框的值来确定输入框是否可以为空的代码
2011/10/18 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
2017/10/24 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
使用Vue CLI创建typescript项目的方法
2019/08/09 Javascript
Vue.js下拉菜单组件使用方法详解
2019/10/19 Javascript
最近Python有点火? 给你7个学习它的理由!
2017/06/26 Python
基于Python实现的ID3决策树功能示例
2018/01/02 Python
代码分析Python地图坐标转换
2018/02/08 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
如何写早恋检讨书
2014/09/10 职场文书
民主评议党员自我评价材料
2014/09/18 职场文书
学习十八大宣传标语
2014/10/09 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
培训后的感想
2015/08/07 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
利用JavaScript写一个简单计算器
2021/11/27 Javascript
「女孩的钓鱼慢活」全新版权绘公布
2022/03/21 日漫