js实现购物车，原理简单，代码解释--＞详细

大家在淘宝或者京东购物时，看到在选中全选按钮，或者其他商品选中，从而触发全选按钮是怎么实现的吗？

单商品的价格计算随着数量的增多减少而上升或者下降吗？

总价随着每个商品的价格相加或相减，而变化吗？

来看看下面的代码吧，实现以上所有功能。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><table border="1" cellspacing="0" cellpadding="0"><tr><th><input type="checkbox" id="all" /></th><th>名称</th><th>价格</th><th>数量</th><th>小计</th><th>操作</th></tr><tr><td><input type="checkbox" /></td><td>键盘</td><td>500</td><td><button type="button" onclick="minus(this)">-</button><input type="text" value="1" /><button type="button"  onclick="add(this)">+</button></td><td>500</td><td><button type="button">删除</button></td></tr><tr><td><input type="checkbox" /></td><td>鼠标</td><td>100</td><td><button type="button" onclick="minus(this)">-</button><input type="text" value="1" /><button type="button" onclick="add(this)">+</button></td><td>100</td><td><button type="button">删除</button></td></tr><tr><td colspan="3">总计</td><td colspan="3" id="sum"></td></tr></table></body><script type="text/javascript" src="购物车.js"></script>
</html>

js代码：

//购物车添加数量
function add(btn) {//数量*价格//1、获取到当前数量+1，并更新input框var num = btn.parentElement.children[1].value;btn.parentElement.children[1].value = ++num;//2、获取单价,字符串var price = btn.parentElement.previousElementSibling.innerText//3、计算小计，并更新渲染var total = parseFloat(price) * num;btn.parentElement.nextElementSibling.innerText = total;//总计calSum();
}//购物车减去数量
function minus(btn) {//数量*价格//1、获取到当前数量+1，并更新input框var num = btn.parentElement.children[1].value;if (num == 0) {return;}btn.parentElement.children[1].value = --num;//2、获取单价,字符串var price = btn.parentElement.previousElementSibling.innerText//3、计算小计，并更新渲染var total = parseFloat(price) * num;btn.parentElement.nextElementSibling.innerText = total;//总计calSum();
}//全选和反选
var _all = document.getElementById("all");
var _sum = document.getElementById("sum");
//选出除了全选的复选框
var _boxes = document.querySelectorAll("input[type=checkbox]:not(#all)")
//全选
_all.onclick = function() {//checked:获取全框的选中状态//this:当前的点击对象var status = this.checked;_boxes.forEach(function(tag) {//下边三个选框跟全选框的状态保持一致tag.checked = status;})calSum();
}//单选
_boxes.forEach(function(tag) {tag.onclick = function() {//过滤出所有被选中的复选框var chs = Array.from(_boxes).filter(function(item) {return item.checked == true;})//如果过滤出得选中的复选框长度等于所有复选框长度，说明全选_all.checked = chs.length === _boxes.length;//总计calSum();}})//总计
function  calSum(){var sum=0;_boxes = document.querySelectorAll("input[type=checkbox]:not(#all)")var newBoxes=Array.from(_boxes).filter(function(tag){return tag.checked==true;})newBoxes.forEach(function(tag){sum+=parseFloat(tag.parentElement.parentElement.children[4].innerText)})_sum.innerText=sum;}

看效果:

不光要看懂理解，也要多写写，才能印象更深啊。行动起来！！！学习之余也要适当放松哦。

有不理解的部分可以评论区留言，或者私信我哦。

js实现购物车，原理简单，代码解释--＞详细相关推荐

java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
【Python笔记】列表基础操作：创建，增加、删除、查询。附加：练习题。用简单代码解释。
Python:列表基础操作创建,增加.删除.查询.附加练习题.用简单代码解释. 目录 Python:列表基础操作演示环境第一部分:列表(list) 1. 创建空列表 2. 创建只有默认值的列表 ...
js发布订阅原理，代码解析
发布订阅发布订阅原理 js代码实现 js代码实现原理发布订阅原理将要处理的时间放入事件队列中存储(订阅) 将事件队列中存储的事件,按照要求进行统一的执行(发布) js代码实现 var dep= ...
用jQuery实现轮播图——超简单(代码解释)
先看效果鼠标悬浮时停止轮播,离开时自动轮播,点下一张小圆点会随着动直接上代码 <!DOCTYPE html> <html><head><meta char ...
双线性插值原理简单通俗解释
双线性插值,这个名字一听就很高大上,在维基百科上一查(见文末一堆的公式),虽然看着好复杂,但仔细一看道理其实比较简单,所以还是梳理一下好. 双线性插值,顾名思义就是两个方向的线性插值加起来.所以只要了 ...
利用js实现购物车相关功能
根据给出购物车页面,用js实现功能部分. 1.实现全选功能. 2.实现四个分项按钮跟随状态的变化并给每一个按钮添加事件,使每个状态发生变化时,判断当前有多少个选中状态的功能. 3.实现已选商品的件数以 ...
数据结构：竞标赛排序原理简单
数据结构:竞标赛排序原理简单代码不会写,太复杂了
步进电机28BYJ-48的驱动（arduino，STM32平台），最全的驱动详细原理，驱动电路分析，驱动代码解释
步进电机28BYJ-48的驱动(arduino平台,STM32),最全的驱动详细原理,驱动电路分析,驱动代码解释目录步进电机28BYJ-48的驱动(arduino平台,STM32),最全的驱动详细 ...
文本相似度计算的简单实例超详细代码解释（附代码，文件）
任务目标本次实验是根据淘宝搜索的商品标题来寻找类似的商品标题: 给定一个标题:Apple iPhone 8 (A1863) 64GB 深空灰色移动联通电信4G手机找出与其类似的前十个标题: 后面 ...
原生js写三级联动 java_原生js三级联动的简单实现代码
本文实例为大家分享了js查询天气应用,供大家参考,具体内容如下实现功能:打开网页时显示用户所在城市的天气状况,在输入框输入城市可查询其它城市. 实现过程:先调用百度地图的API来获取用户所在的城市, ...

js实现购物车，原理简单，代码解释--＞详细

js实现购物车，原理简单，代码解释--＞详细相关推荐

最新文章

热门文章