jquery实现购物车基本功能

购物车里的功能无非是商品数量的加减、商品删除、全选反选等操作，其实现过程如下所示：

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;
 
 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);
 }
 }
});

效果如下图所示：

以上就是一个功能比较完整的购物车，有问题或者建议欢迎指出。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。