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无法使用window.location.reload()刷新页面
Jun 21 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
javascript创建对象的3种方法
Nov 02 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
TypeScript入门-接口
Mar 30 Javascript
vue-cli监听组件加载完成的方法
Sep 07 Javascript
react+ant design实现Table的增、删、改的示例代码
Dec 27 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
使用vue-router切换页面时实现设置过渡动画
Oct 31 Javascript
详解JavaScript中分解数字的三种方法
Jan 05 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中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
javascript 函数式编程
2007/08/16 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
Android中的jQuery:AQuery简介
2014/05/06 Javascript
jquery仿搜索自动联想功能代码
2014/05/23 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
详解Node.js access_token的获取、存储及更新
2017/06/20 Javascript
vue项目国际化vue-i18n的安装使用教程
2018/03/14 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
让你5分钟掌握9个JavaScript小技巧
2018/06/09 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
全面解读Python Web开发框架Django
2014/06/30 Python
Python守护进程用法实例分析
2015/06/04 Python
在Python中定义一个常量的方法
2018/11/10 Python
Python3爬虫全国地址信息
2019/01/05 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
2013/09/02 HTML / CSS
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
Java如何读取CLOB字段
2013/10/10 面试题
英文版销售经理个人求职信
2013/11/20 职场文书
派出所所长先进事迹
2014/05/19 职场文书
中学教师师德师风演讲稿
2014/08/22 职场文书
2014年党务工作总结
2014/11/25 职场文书
大学生暑期实践报告
2015/07/13 职场文书
四群教育工作总结
2015/08/10 职场文书
2016年中秋节慰问信
2015/12/01 职场文书
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android