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 相关文章推荐
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
Nov 28 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
js获取新浪天气接口的实现代码
Jun 06 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
jQuery正则验证注册页面经典实例
Jun 10 jQuery
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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
php4的session功能评述(二)
2006/10/09 PHP
Apache, PHP在Windows 9x/NT下的安装与配置 (二)
2006/10/09 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
php实现的任意进制互转类分享
2015/07/07 PHP
文件上传之SWFUpload插件(代码)
2015/07/30 PHP
Thinkphp 框架基础之入口文件功能、定义与用法分析
2020/04/27 PHP
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
js形成页面的一种遮罩效果实例代码
2014/01/04 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
vue里面父组件修改子组件样式的方法
2018/02/03 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
vue插件开发之使用pdf.js实现手机端在线预览pdf文档的方法
2018/07/12 Javascript
使用vue实现各类弹出框组件
2019/07/03 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python多进程同步简单实现代码
2016/04/27 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
python matplotlib 画dataframe的时间序列图实例
2019/11/20 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
Python 利用OpenCV给照片换底色的示例代码
2020/08/03 Python
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
大学应届毕业生个人求职信
2013/09/23 职场文书
高中军训广播稿
2014/01/14 职场文书
英语专业自荐书
2014/06/13 职场文书
大学生推广普通话演讲稿
2014/09/21 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
周末问候语大全
2015/11/10 职场文书