JS实现购物车动态功能

最新推荐文章于 2024-05-28 18:30:26 发布

weixin_30933531

最新推荐文章于 2024-05-28 18:30:26 发布

阅读量5.8k

点赞数 6

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xyyl/p/10924003.html

本文分享了使用JavaScript实现购物车功能的案例，包括商品的单选、全选、反选，添加、删除以及价格自动计算。案例中，商品数量增加会自动更新总价，支持取消选择和删除操作，同时商品可显示与隐藏。代码实现借助了作者之前封装的框架，详细代码和更多详情可在作者的另一篇文章中获取。

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

整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。
该案例购物车主要功能如下：
1、商品单选、全选、反选功能
2、商品添加、删除功能
3、商品价格自动计算
具体效果：
打开效果

添加商品数量（自动计算价格）：

取消选择：

删除商品：

商品显示与隐藏：

做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的另一篇文章里面自己下载喔，链接：https://www.cnblogs.com/xyyl/p/10912037.html
html代码：

<body onselectstart="return false;">
<template id="temp">
    <tr>
        <td>
            <input type="checkbox" class="check" checked>
        </td>
        <td>
            <img src="images/{src}">{txt}
        </td>
        <td>{price}</td>
        <td>
            <span class="reduce">-</span><input class="text" value="1"><span class="add">+</span>
        </td>
        <td>{subtotal}</td>
        <td>
            <span class="del">删除</span>
        </td>
    </tr>
</template>
<div class="box" id="box">
    <table>
        <thead>
        <tr>
            <th>
                <label>
                    <input type="checkbox" class="checkAll check" checked>全选
                </label>
            </th>
            <th>商品</th>
            <th>单价