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 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
JS字符串的切分用法实例
Feb 22 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
AnjularJS中$scope和$rootScope的区别小结
Sep 18 Javascript
Vue.js 递归组件实现树形菜单(实例分享)
Dec 21 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
AngularJs每天学习之总体介绍
Aug 07 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
node+multer实现图片上传的示例代码
Feb 18 Javascript
js模拟实现烟花特效
Mar 10 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 冲泡冲煮
在apache下限制每个虚拟主机的并发数!!!!
2006/10/09 PHP
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
2010/06/28 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
JavaScript将数据转换成整数的方法
2014/01/04 Javascript
jquery实现的树形目录实例
2015/06/26 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
不用一句js代码初始化组件
2016/01/27 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
uni-app自定义导航栏按钮|uniapp仿微信顶部导航条功能
2019/11/12 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
pygame实现俄罗斯方块游戏(AI篇2)
2019/10/29 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
企业厂务公开实施方案
2014/03/26 职场文书
教学改革实施方案
2014/03/31 职场文书
鸟的天堂导游词
2015/01/31 职场文书
公司员工违纪检讨书
2015/05/05 职场文书
《山中访友》教学反思
2016/02/24 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
在python中读取和写入CSV文件详情
2022/06/28 Python