使用jquery怎么实现一个购物车功能

本篇文章给大家分享的是有关使用jquery怎么实现一个购物车功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

创新互联成立于2013年，我们提供高端重庆网站建设公司、成都网站制作、成都网站设计公司、网站定制、成都全网营销推广、小程序制作、微信公众号开发、seo优化服务，提供专业营销思路、内容策划、视觉设计、程序开发来完成项目落地，为成都橡塑保温企业提供源源不断的流量和订单咨询。

1.html代码：


 
 购物车空空如也，快去选购吧

全选序号商品名称数量单价小计操作 1 烤煎饼

单价： 2 小计： 2 删除 2 珍珠奶茶

单价： 4 小计： 4 删除 3 水煮鱼

单价： 20 小计： 20 删除 4 蛋糕

单价： 50 小计： 50 删除 5 土豆片

单价： 5 小计： 5 删除 6 蛋黄派

单价： 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://mswzjz.cn/article/jjoigi.html

网站建设知识

使用jquery怎么实现一个购物车功能

其他资讯