用原生JavaScript和jQuery实现购物车页面基本功能

努力学习的码农丫

已于 2024-12-08 16:46:12 修改

阅读量859

点赞数 2

文章标签： javascript jquery 前端

于 2022-11-27 17:25:05 首次发布

本文链接：https://blog.csdn.net/qq_52264068/article/details/128066603

版权

这篇博客详细介绍了如何使用原生JavaScript和jQuery来实现购物车页面的基本功能，包括购物车的全选操作。首先展示了预期的实现效果，接着分别讲解了原生JavaScript和jQuery的实现方法，提供相关的HTML和CSS样式代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现效果

实现功能如下：

1.购物车案例模块-全选

里面3个小的复选框按钮选中状态跟着全选按钮走。

2.购物车案例模块-增减商品数量

点击+号，就让数量值增加，然后赋值给文本框；点击-号，就让数量值减少，然后赋值给文本框。

3.购物车案例模块-修改商品小计

每次点击+号或者-号，修改商品的小计

4.购物车案例模块-计算总计和总额

只有选中框选中时，才参与总计计数和总价

5.购物车案例模块-删除商品模块

点击商品后面的删除按钮和删除选中的商品和清理购物车，都要进行相应功能删除

6.购物车案例模块-选中商品添加背景

选中的商品添加背景，不选中移除背景

html文档：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入car css -->
    <link rel="stylesheet" href="css/car.css">
</head>

<body>


    <div class="car-header">
        <div class="w">
            <div class="car-logo">
                <b>我的购物车</b>
            </div>
        </div>
    </div>

    </div>
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 购物车主要核心区域 -->
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">小计</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥5.9</div>
                        <div class="p-action"><a href="javascript:;">删除</a></div>
                    </div>
                    <div class="cart-item"&

最低0.47元/天解锁文章