jquery实现购物车基本功能

网络编程 2025/11/4 佚名

3 2 1

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

1.html代码：

<body>
 <div class="empty">
 购物车空空如也，<a href="javascript:void(0);" >快去选购吧</a>
 </div>
 <table border="2px solid #ccc" id="table">
 <thead>
 <th>
 <input type="checkbox" class="checkOnly" style="vertical-align:middle;margin-right:20px;">全选
 </th>
 <th>序号</th>
 <th>商品名称</th>
 <th>数量</th>
 <th>单价</th>
 <th>小计</th>
 <th>操作</th>
 </thead>
 <tbody>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">1</td>
 <td>烤煎饼</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价：
 <span class="price">2</span>
 </td>
 <td>
 小计：
 <span class="prices">2</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">2</td>
 <td>珍珠奶茶</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价：
 <span class="price">4</span>
 </td>
 <td>
 小计：
 <span class="prices">4</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">3</td>
 <td>水煮鱼</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价：
 <span class="price">20</span>
 </td>
 <td>
 小计：
 <span class="prices">20</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">4</td>
 <td>蛋糕</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价：
 <span class="price">50</span>
 </td>
 <td>
 小计：
 <span class="prices">50</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">5</td>
 <td>土豆片</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价：
 <span class="price">5</span>
 </td>
 <td>
 小计：
 <span class="prices">5</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">6</td>
 <td>蛋黄派</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>单价：
 <span class="price">5.5</span>
 </td>
 <td>
 小计：
 <span class="prices">5.5</span>
 </td>
 <td>
 <a href="#" class="del">删除</a>
 </td>
 </tr>
 <tr>
 <td colspan="7" class="talast">
 <span>商品一共
 <span class="goods_num" style="color:red;font-size:20px;">0</span> 件; 共计花费
 <span class="pricetal" style="color:red;font-size:20px;">0</span> 元; 其中最贵的商品单价是
 <span class="pricest" style="color:red;font-size:20px;">0</span> 元</span>
 </td>
 </tr>
 </tbody>
 </table>
</body>

2.css代码：

<style type="text/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;
 }
 </style>

3.js代码：

<script src="/UploadFiles/2021-04-02/jquery-1.8.3.min.js">

补充上面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,购物车

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“jquery实现购物车基本功能”

jquery实现购物车基本功能

暂无“jquery实现购物车基本功能”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新动态

2025年11月04日

jquery实现购物车基本功能

jquery,购物车

layui form表单提交后实现自动刷新

vue中@change兼容问题详解

评论“jquery实现购物车基本功能”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新动态

友情链接