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访问XML数据的实例
Dec 27 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
vue基于mint-ui的城市选择3级联动的示例
Oct 25 Javascript
微信小程序实现带缩略图轮播效果
Nov 04 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue组件三大核心概念图文详解
May 30 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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
escape unescape的php下的实现方法
2007/04/27 PHP
php cli 小技巧
2013/06/03 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
phpstorm 正则匹配删除空行、注释行(替换注释行为空行)
2018/01/21 PHP
javascript实现仿银行密码输入框效果的代码
2007/12/13 Javascript
编写高性能的JavaScript 脚本的加载与执行
2010/04/19 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
Nodejs学习笔记之Stream模块
2015/01/13 NodeJs
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
vue router 用户登陆功能的实例代码
2019/04/24 Javascript
基于layui的下拉列表的数据回显方法
2019/09/24 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
python中requests和https使用简单示例
2018/01/18 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python 移动光标位置的方法
2019/01/20 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python快速转换numpy数组中Nan和Inf的方法实例说明
2019/02/21 Python
python爬虫的一个常见简单js反爬详解
2019/07/09 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python3常见函数range()用法详解
2019/12/30 Python
django教程如何自学
2020/07/31 Python
Tretorn美国官网:瑞典外套和鞋类品牌,抵御风雨
2018/07/19 全球购物
C语言怎样定义和声明全局变量和函数最好
2013/11/26 面试题
什么是组件架构
2016/05/15 面试题
员工考核管理制度
2014/02/02 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
竞聘演讲稿开场白
2014/08/25 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
文艺演出主持词
2015/07/01 职场文书
MySQL8.0.24版本Release Note的一些改进点
2021/04/22 MySQL
基于flask实现五子棋小游戏
2021/05/25 Python