这篇文章主要介绍了用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值加起来。
最新资讯
SpaceX再次推迟星链和BlackSky卫星发射

SpaceX再次推迟星链和

当地时间7月11日,SpaceX再次推迟了最新的星链卫星发射,
史玉柱难退休,巨人网络不服老

史玉柱难退休,巨人网络

目前巨人网络内生游戏主业的创新仍未取得太多成绩,加上
学了三年的东西,为什么高考完就忘了?

学了三年的东西,为什么

遗忘是记忆系统的一个重要组成成分,绝大多数人都无法做
男性、高龄、糖尿病、非白人族裔均是新冠死亡高危因素

男性、高龄、糖尿病、

新冠最新发现!1700万人数据揭示新冠肺炎相关死亡的影响
五月天陈奕迅线上演唱会刷屏背后

五月天陈奕迅线上演唱

6点,晨光熹微,香港维多利亚港畔,音乐响起。
恒星赤道低温,行星两个夏季:"最热行星"所在系统,为何如此奇特

恒星赤道低温,行星两

通过勘测卫星对一颗距离地球670光年的系外行星的细致
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大