这篇文章主要介绍了用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值加起来。
最新资讯
最新!王思聪被取消限制消费令

最新!王思聪被取消限制

11月20日晚间,新京报记者查询中国执行信息公开网发现,王
阿里巴巴公布香港IPO定价:每股176港元

阿里巴巴公布香港IPO

阿里巴巴(纽交所代码:BABA)宣布,由国际发售和香港公开发售
拼多多:月活用户数达4.296亿 年活买家数达5.363亿

拼多多:月活用户数达4.

拼多多称,截至2019年9月30日,拼多多独立App平均月活跃用
港交所:阿里巴巴上市首日可卖空

港交所:阿里巴巴上市首

港交所20日宣布,将于11月26日阿里巴巴上市时,推出阿里巴
外交部谈中美科技交流:要拆墙而不是筑墙

外交部谈中美科技交流

外交部谈中美科技交流:要拉手而不是松手,要拆墙而不是筑
彭博:阿里暂不会被纳入基准恒生指数 未来或改变

彭博:阿里暂不会被纳入

据彭博社报道,除非香港恒生指数有限公司显著调整规则,否
最新文章
微信小程序调用天气接口并且渲染在页面过程详解

微信小程序调用天气接

这篇文章主要介绍了微信小程序调用天气接口并且渲染在
Electron + vue 打包桌面操作流程详解

Electron + vue 打包

这篇文章主要介绍了Electron + vue 打包桌面操作流程,
前端Vue项目详解--初始化及导航栏

前端Vue项目详解--初

这篇文章主要介绍了前端Vue项目详解--初始化及导航栏,
ES6 Object方法扩展的应用实例分析

ES6 Object方法扩展的

这篇文章主要介绍了ES6 Object方法扩展的应用,结合实
JS实现给数组对象排序的方法分析

JS实现给数组对象排序

这篇文章主要介绍了JS实现给数组对象排序的方法,结合
基于vue+axios+lrz.js微信端图片压缩上传方法

基于vue+axios+lrz.js

这篇文章主要介绍了基于vue+axios+lrz.js微信端图片压