使用jquery怎么实现一个购物车功能
本篇文章给大家分享的是有关使用jquery怎么实现一个购物车功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联成立于2013年，我们提供高端重庆网站建设公司、成都网站制作、成都网站设计公司、网站定制、成都全网营销推广、小程序制作、微信公众号开发、seo优化服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为成都橡塑保温企业提供源源不断的流量和订单咨询。
1.html代码：
购物车空空如也，快去选购吧
全选
|
序号 |
商品名称 |
数量 |
单价 |
小计 |
操作 |
|
|
1
烤煎饼 |
1
|
单价：
2
|
小计：
2
|
删除
|
|
|
2
珍珠奶茶 |
1
|
单价：
4
|
小计：
4
|
删除
|
|
|
3
水煮鱼 |
1
|
单价：
20
|
小计：
20
|
删除
|
|
|
4
蛋糕 |
1
|
单价：
50
|
小计：
50
|
删除
|
|
|
5
土豆片 |
1
|
单价：
5
|
小计：
5
|
删除
|
|
|
6
蛋黄派 |
1
|
单价：
5.5
|
小计：
5.5
|
删除
|
商品一共
0 件; 共计花费
0 元; 其中最贵的商品单价是
0 元
2.css代码：
table {
width: 1000px;
/* height: 300px; */
border-collapse: collapse;
table-layout: fixed;
text-align: center;
font-size: 18px;
margin: 0 auto;
}
a {
text-decoration: none;
color: black;
}
tr {
height: 50px;
}
.check {
width: 20px;
height: 20px;
}
.checkOnly {
width: 20px;
height: 20px;
}
.empty {
font-size: 25px;
position: fixed;
top: 45%;
left: 45%;
display: none;
}
.empty a {
color: pink;
}
.empty a:hover {
text-decoration: underline;
}
3.js代码：
//引入jquery
//引入封装好的全选反选插件
补充上面js代码中用到的全选反选插件 \color{red}{补充上面js代码中用到的全选反选插件}补充上面js代码中用到的全选反选插件
//1、定义全选的插件
jQuery.fn.extend({
bindCheck:function($subCheckBox,$btnUncheck){
let $allCheckBox = this;
//1、给全选复选框绑定click事件
//this:是全选复选框（jQuery对象）
this.click(function(){
let isChecked = this.checked;
$subCheckBox.each(function(){
this.checked = isChecked;
});
});
//2、给反选
if(arguments.length==2){
$btnUncheck.click(function(){
$subCheckBox.each(function(){
this.checked = !this.checked;
});
reversCheck();
});
}
//3、给每个选择项的复选框绑定事件
$subCheckBox.click(function(){
reversCheck();
});
function reversCheck(){
//1、判断是否全部的复选框被选中
let isAllChecked = true;
$subCheckBox.each(function(){
if(!this.checked){
isAllChecked = false;
}
});
//2、处理全选复选框
$allCheckBox.attr("checked",isAllChecked);
}
}
});以上就是使用jquery怎么实现一个购物车功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
网页标题：使用jquery怎么实现一个购物车功能
路径分享：http://www.cdkjz.cn/article/jjoigi.html
