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的函数
Jan 31 Javascript
纯javascript实现自动发送邮件
Oct 21 Javascript
解决js函数闭包内存泄露问题的办法
Jan 25 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
Javascript获取图片原始宽度和高度的方法详解
Sep 20 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
Jul 09 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
js排序与重组的实例讲解
Aug 28 Javascript
webpack 打包压缩js和css的方法示例
Mar 20 Javascript
详解express使用vue-router的history踩坑
Jun 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 array_merge下进行数组合并的代码
2008/07/22 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery 全选 全部选 反选 实现代码
2016/08/17 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
2016/08/30 Javascript
flexslider.js实现移动端轮播
2017/02/05 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
jquery检测上传文件大小示例
2020/04/26 jQuery
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
Python爬取国外天气预报网站的方法
2015/07/10 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Java Web开发过程中登陆模块的验证码的实现方式总结
2016/05/25 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Python PyAutoGUI模块控制鼠标和键盘实现自动化任务详解
2018/09/04 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
tensorflow求导和梯度计算实例
2020/01/23 Python
Python常见反爬虫机制解决方案
2020/06/01 Python
python语言是免费还是收费的?
2020/06/15 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
简历自我评价模版
2014/01/31 职场文书
工厂会计员职责
2014/02/06 职场文书
2014政务公开实施方案
2014/02/19 职场文书
工作过失检讨书
2014/02/23 职场文书
2015年度护士个人工作总结
2015/04/09 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
ORACLE数据库应用开发的三十个注意事项
2021/06/07 Oracle