JS实现购物车功能
介绍下如何使用js实现简单的购物车 功能如下：点击相应按钮，数量和价格会进行加减，点击相应的单选项，会将价钱显示到下面，全选按钮以及总价格。
·
在整个前端中，JS实现购物车基本功能算是一个经典案例，今天把它整理出来，需要的小伙伴可以参考一下。
该案例的购物车主要功能如下：
1、 商品单选、全选、反选功能
2、 商品价格自动计算
直接上代码！
<!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">
/* 思路：1、首先通过点击加减按钮，实现input框内数值的加减变化
2、其次要实现复选框checkbox反选和全选
3、最后通过复选框的勾选，以及按钮的加减，获取总计 */
//第一步
//购物车增加数量
function add(btn) {
//数量*价格
//1、获取到当前input框数值，并更新input框
//parentElement:获取父节点 children:获取子节点
var num=btn.parentElement.children[1].value;
//parentElement:获取父节点 children:获取子节点
btn.parentElement.children[1].value=++num;
//2、获取单价,字符串
//parentElement:获取父节点 //previousElementSibling：获取哥哥节点
var proce=btn.parentElement.previousElementSibling.innerText;
//3、计算小计，并更新渲染
var total=parseFloat(proce)*num;
//parentElement:获取父节点 nextElementSibling：获取弟弟节点
btn.parentElement.nextElementSibling.innerText=total;
//总计
calSum();
}
//购物车减少数量
function minus(btn){
//数量*价格
//1、获取到当前input框数值，并更新input框
//parentElement:获取父节点 children:获取子节点
var num=btn.parentElement.children[1].value;
//设置不能减到负数，到0就不能减
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:获取被选中时的状态（当被选中时返回true，反之false）
// this：当前的点击对象
var status=this.checked;
_boxes.forEach(function(tag){
//复选框根全框选状态保持一致
// tag:指_boxes内的每一项
tag.checked=status;
})
//总计
calSum();
}
//其次点击复选框之后，实现全选框选中/反之不选中全选框
_boxes.forEach(function(tag){
//tag:指_boxes内的每一项
tag.onclick=function(){
//过滤出所有被选中的复选框
// filter:返回所有符合条件的元素数组；
var chs=Array.from(_boxes).filter(function(item){
return item.checked==true;
})
// 如果过滤出所得选中的复选框长度等于所有复选框长度，说明全选
_all.checked=chs.length===_boxes.length;
//总计
calSum();
}
})
//总计
function calSum(){
var sum=0;
//newBoxes:指被选中的按钮
// tag：俩按钮
var newBoxes=Array.from(_boxes).filter(function(tag){
return tag.checked==true;
})
//tag:被选中的按钮
newBoxes.forEach(function(tag){
sum+=parseFloat(tag.parentElement.parentElement.children[4].innerText)
})
_sum.innerText=sum;
}
</script>
</html>
运行效果
欢迎留言，如果你有更好的思路，希望可以一起探讨！
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
19
0- 0
已为社区贡献2条内容
所有评论(0)