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获取并操作iframe中元素的方法
Mar 21 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
浅析JavaScript中两种类型的全局对象/函数
Dec 05 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
JavaScript常用脚本汇总(一)
Mar 04 Javascript
jquery实现输入框实时输入触发事件代码
Dec 21 Javascript
JavaScript实现获取远程的html到当前页面中
Mar 26 Javascript
JS实现多级菜单中当前菜单不随页面跳转样式而发生变化
May 30 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
深入了解Vue.js 混入(mixins)
Jul 23 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
各种咖啡的英文名子是什么
2021/03/03 新手入门
php数字转汉字代码(算法)
2011/10/08 PHP
PHP整数取余返回负数的相关解决方法
2014/05/15 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
JSON字符串传到后台PHP处理问题的解决方法
2016/06/05 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
jquery获得页面元素的坐标值实现思路及代码
2013/04/15 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
微信小程序实现换肤功能
2018/03/14 Javascript
javascript原生封装一个淡入淡出效果的函数测试实例代码
2018/03/19 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
vue+axios+promise实际开发用法详解
2018/10/15 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
2018/11/23 Javascript
nodejs同步调用获取mysql数据时遇到的大坑
2019/03/02 NodeJs
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
python实现simhash算法实例
2014/04/25 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Django中URL的参数传递的实现
2019/08/04 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
python识别验证码的思路及解决方案
2020/09/13 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
运动会广播稿100字
2014/01/11 职场文书
十月份红领巾广播稿
2014/01/22 职场文书
个人近期表现材料
2014/02/11 职场文书
在职党员进社区活动总结
2014/07/05 职场文书
公民代理授权委托书
2014/09/24 职场文书
格林童话读书笔记
2015/06/30 职场文书
个人合作协议范本
2015/08/06 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
MySQL数据库表约束讲解
2022/06/21 MySQL