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 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
vue.js组件vue-waterfall-easy实现瀑布流效果
Aug 22 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 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桌面中心(四) 数据显示
2007/03/11 PHP
php面向对象全攻略 (十二) 抽象方法和抽象类
2009/09/30 PHP
PHP array_multisort()函数的使用札记
2011/07/03 PHP
php空间不支持socket但支持curl时recaptcha的用法
2011/11/07 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
php array_values 返回数组的所有值详解及实例
2016/11/12 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript 学习笔记(六)
2009/12/31 Javascript
奉献给JavaScript初学者的编写开发的七个细节
2011/01/11 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
jquery选择器需要注意的问题
2014/11/26 Javascript
JS实现可调整倒计时间代码分享
2015/08/18 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
Vue.js学习教程之列表渲染详解
2017/05/17 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
JS中appendChild追加子节点无效的解决方法
2018/10/14 Javascript
微信小程序实现自动定位功能
2018/10/31 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
Python 异常处理实例详解
2014/03/12 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
python paramiko远程服务器终端操作过程解析
2019/12/14 Python
Python换行与不换行的输出实例
2020/02/19 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
Python爬虫实例——爬取美团美食数据
2020/07/15 Python
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
实习生个人的自我评价
2013/12/08 职场文书
重阳节标语大全
2014/10/07 职场文书
GitHub上77.9K的Axios项目有哪些值得借鉴的地方详析
2021/06/15 Javascript