js实现简单的购物车有图有代码
更新时间：2014年05月26日 09:24:22 作者：
这篇文章主要介绍了用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值加起来。
全选按钮的实现为：
复制代码 代码如下:
<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值加起来。
相关文章
在本章中，我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单2017-03-03
这篇文章主要为大家详细介绍了uni-app实现NFC读取功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要介绍了js中取得变量绝对值的方法,较为详细的分析了js中abs方法取绝对值的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
原生JS利用transform实现banner的无限滚动示例代码
这篇文章主要介绍了原生JS利用transform实现banner的无限滚动示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了js获取url页面id，也就是最后的数字文件名，有时候我们需要判断当前页面的id，又不用重新生成页面直接用js获取最后的数字.htm即可2020-09-09
JavaScript实现阿拉伯数字和中文数字互相转换可以用数组的循环检测后的替换来实现,下面主要讲解其中的一些核心算法:2016-06-06
我将用最通俗的语言和最简洁的代码给大家演示如何创建一个JavaScript弹出DIV窗口层的效果2013-09-09
用JS来操作一个XML文档来实现一个简单的表单联动2009-10-10
这篇文章主要介绍了怎样用JavaScript实现原型模式，想学习设计模式的同学，可以参考下2021-04-04
IE event.srcElement和FF event.target 功能比较
可以捕获当前事件作用的对象，如event.srcElement.tagName可以捕获活动标记名称。2010-03-03
最新评论