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 相关文章推荐
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
node.js Web应用框架Express入门指南
May 28 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
HTML的select控件美化
Mar 27 Javascript
深入理解vuex2.0 之 modules
Nov 20 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
JavaScript HTML DOM元素 节点操作汇总
Jul 29 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 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 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
PHP中$this和$that指针使用实例
2015/01/06 PHP
关于PHP开发的9条建议
2015/07/27 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
jQuery数据缓存功能的实现思路及简单模拟
2013/05/27 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jquery实现类似EasyUI的页面布局可改变左右的宽度
2020/09/12 Javascript
JavaScript检测并限制复选框选中个数的方法
2015/08/12 Javascript
jQuery实现分隔条左右拖动功能
2015/11/21 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
轻松掌握JavaScript中介者模式
2016/08/26 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
JavaScript简单下拉菜单特效
2016/09/13 Javascript
原生JS实现的放大镜效果实例代码
2016/10/15 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
node内置调试方法总结
2018/02/22 Javascript
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
Vue SSR 即时编译技术的实现
2020/05/06 Javascript
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
python 网络编程详解及简单实例
2017/04/25 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
详解PyTorch批训练及优化器比较
2018/04/28 Python
python列表,字典,元组简单用法示例
2019/07/11 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
使用CSS3来匹配横屏竖屏的简单方法
2015/08/04 HTML / CSS
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
函授本科毕业自我鉴定
2013/10/09 职场文书
2014年应届大学生毕业自我鉴定
2014/01/31 职场文书
学生安全责任书
2014/04/15 职场文书
Tensorflow与RNN、双向LSTM等的踩坑记录及解决
2021/05/31 Python
详细聊聊Oracle表碎片对性能有多大的影响
2022/03/19 Oracle