宜宾网站建设公司

使用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://ybzwz.com/article/jjoigi.html

其他资讯