案例：购物车全选

最新推荐文章于 2022-08-04 21:10:28 发布
最新推荐文章于 2022-08-04 21:10:28 发布
阅读量638 收藏 4
点赞数 1
分类专栏： jQuery 文章标签： javascript jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47123982/article/details/108364250
版权

在这里插入图片描述

<div class="c-container">
    <div class="w">
        <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" name="" id="" checked 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">￥12.60</div>
                    <div class="p-action"><a href="javascript:;">删除</a></div>
                </div>
                <div class="cart-item">
                    <div class="p-checkbox">
                        <input type="checkbox" name="" id="" class="j-checkbox">
                    </div>
                    <div class="p-goods">
                        <div class="p-img">
                            <img src="upload/p2.jpg" alt="">
                        </div>
                        <div class="p-msg">【2000张贴纸】贴纸书 3-全套画 贴纸儿童 汽</div>
                    </div>
                    <div class="p-price">￥24.80</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">￥24.80</div>
                    <div class="p-action"><a href="javascript:;">删除</a></div>
                </div>
                <div class="cart-item">
                    <div class="p-checkbox">
                        <input type="checkbox" name="" id="" class="j-checkbox">
                    </div>
                    <div class="p-goods">
                        <div class="p-img">
                            <img src="upload/p3.jpg" alt="">
                        </div>
                        <div class="p-msg">唐诗三百首+二外籍</div>
                    </div>
                    <div class="p-price">￥29.80</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">￥29.80</div>
                    <div class="p-action"><a href="javascript:;">删除</a></div>
                </div>
            </div>

            <!-- 结算模块 -->
            <div class="cart-floatbar">
                <div class="select-all">
                    <input type="checkbox" name="" id="" class="checkall">全选
                </div>
                <div class="operation">
                    <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                    <a href="javascript:;" class="clear-all">清理购物车</a>
                </div>
                <div class="toolbar-right">
                    <div class="amount-sum">已经选<em>1</em>件商品</div>
                    <div class="price-sum">总价： <em>￥12.60</em></div>
                    <div class="btn-area">去结算</div>
                </div>
            </div>
        </div>
    </div>
</div>

$(function() {
    $(".checkall").change(function() {
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
    });
    
    $(".j-checkbox").change(function() {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
    });
})
小青衣呀
关注
专栏目录
jQuery 属性操作：购物车案例模块—全选
赚钱养自个儿的博客
05-15 834
思路 1.里面3个小的复选框按钮（j-checkbox）选中状态（checked）跟着全选按钮（checkall）走 2.因为 checked 是复选框的固有属性，此时我们需要利用 prop() 方法获取和设置该属性。 3.把全选按钮状态赋值给小复选框就可以了。 4.当我们每次点击小的复选框按钮，就来判断： 5.如果小复选框被选中的个数等于3就应该把全选按钮选上，否则全选按钮不选。 6.:checked 选择器：checked 查找被选中的表单元素。 ...
Python项目-全选购物车
weixin_45905671的博客
04-03 359
在购物车页面修改购物车使用局部刷新的效果。 全选购物车接口设计和定义 后端接口定义 class CartsSelectAllView(View): """全选购物车""" def put(self, request): # 接收和校验参数 # 判断用户是否登录 user = request.user if user.is_authenticated: # 用户已登录，操作redis购物车
js实现购物车案例（全选，反选，加入，删除，加减，总价，数量）
m0_62309118的博客
09-26 5496
1.购物车效果展示 2.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin:0px; padding:0px; }.shop{ width:900px; height:300px; border:1px solid red; margin:0 au
全选购物车
王鑫林的博客
05-06 230
//点击全选 holder.item3_CheckBox.setChecked(list.get(i).isChecked()); //点击全选 @Override public void onClick(View view) { switch (view.getId()){ case R.id.all_chekbox: int allprice=0; ...
JQ点名器案例、购物车选择商品(全选，单选)
HeDashuaithan的博客
01-05 304
点名器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>点名器</title> </head> <body> <h3>TongBaiShan's name-list</h3> <div> <h4>name-list</h4> <p>&lt
淘宝购物车全选js
04-13
淘宝购物车全选js 1、选中所有商品-自动选中/取消全选按钮 2、选中商店-自动选中/取消公司下的所有商品； 3、全选
购物车全选案例
YanLingGe的博客
12-01 584
要求：1.单击全选能勾选下列所有项 2.再次单击下列所有项都不勾选 3下列项只要有一个没有勾选时取消全选的勾选状态 4.下列项全部勾选时全选也变为勾选状态 思路：1.实现单击全选能勾选下列所有项 2.通过判断全选按钮的状态，来实现再次单击下列所有项都不勾选 3.循环遍历给下面按钮都添加点击事件，通过判断下列每一个按钮的状态，来实现要求3和4 具体代码展示如下： <!DOCTYPE html...
购物车案例
weixin_45626166的博客
10-19 139
<div id="app" v-cloak> <div class="container"> <div class="row"> <div class="col-md-12"> <!-- 库存 --> <ul class="saveGoo...
案例：购物车案例模块-全选
01-18
"购物车案例模块-全选"通常是指在购物车页面上实现的全选功能，允许用户一键选择所有商品。这个案例可能涵盖了前端开发、用户交互设计以及后端数据处理等多个方面。下面我们将详细探讨相关的知识点。 1. **前端开发...
jQuery实现类似淘宝购物车全选状态示例
12-12
代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <... charset=utf-8″ /> <...script type=”text/javascript”
购物车的全选，全不选，局部全选，全选判定
11-10
购物车的全选，全不选，局部全选，全选判定,
购物车的全选 结算 合计功能
06-05
购物车的全选 结算 合计功能
购物车全选，删除
11-02
购物车全选，删除 购物车全选，删除 购物车全选，删除
Vue实现购物车的全选、单选、显示商品价格代码实例
10-17
在Vue.js中实现购物车功能，包括全选、单选以及动态显示商品价格，涉及到Vue的数据绑定、事件处理以及计算属性等多个核心概念。以下是对这些知识点的详细解释： 1. **数据绑定** (`v-model`): Vue的核心特性之一，...
案例:购物车案例（vue组件总结）
酷爱前端的小陈博客
04-25 2538
1. 案例效果 2. 实现步骤 ① 初始化项目基本结构 ② 封装MyHeader 组件 ③ 基于axios 请求商品列表数据（ GET 请求，地址为 https://www.escook.cn/api/cart） ④ 封装MyFooter 组件 ⑤ 封装MyGoods 组件 ⑥ 封装MyCounter 组件 3. 完整代码： 项目目录： main.js部分： import Vue from 'vue' import App from './App.vue' ...
jquery实现购物车案例模块全选
weixin_45147894的博客
10-22 2645
文章目录 一、jQuery属性操作: 1. 元素固有属性prop(): 2. 元素自定义属性 attr() 3. 数据缓存 data(): 4. 演示代码: 二、jQuery 文本属性值: 1. jQuery内容文本值 1.1 语法: 1.2 演示代码: 三、jQuery元素操作: 1. 遍历元素 2. 语法: 2.1 语法1: 2.2 语法2: 2.3 演示代码: 2. 创建、添加、删除: 2.
uni-app 购物车全选案例
weixin_57660141的博客
08-04 820
购物车实现全选
Vue购物车案例（全选，反选，加入，删除，加减，总价，数量）
热门推荐
qq_51501183的博客
09-22 1万+
1.购物车效果图 2.代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> body{ font-size: 16px; } table { width: 1200px; } ul l....
购物车全选功能实现-js
m0_66051368的博客
08-03 1456
购物车全选功能实现
用html完成实验五：购物车，购物车功能：1.全选2.增减商品数量3.修改商品小计4. 计算总计和总额5. 购物车案例模块-删除商品模块
最新发布
05-26
很高兴为您提供购物车功能的HTML代码实现，以下是完整的HTML代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>购物车</title> </head> <body> <h1>购物车</h1> <table> <thead> <tr> <th><input type="checkbox" id="check-all"></th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" class="check-item"></td> <td>商品1</td> <td>10</td> <td><button class="reduce-btn">-</button><span class="count">1</span><button class="add-btn">+</button></td> <td class="subtotal">10</td> <td><button class="delete-btn">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check-item"></td> <td>商品2</td> <td>20</td> <td><button class="reduce-btn">-</button><span class="count">1</span><button class="add-btn">+</button></td> <td class="subtotal">20</td> <td><button class="delete-btn">删除</button></td> </tr> <tr> <td><input type="checkbox" class="check-item"></td> <td>商品3</td> <td>30</td> <td><button class="reduce-btn">-</button><span class="count">1</span><button class="add-btn">+</button></td> <td class="subtotal">30</td> <td><button class="delete-btn">删除</button></td> </tr> </tbody> <tfoot> <tr> <td colspan="6"> <button id="delete-all-btn">删除选中商品</button> <span>总计：<span id="total-count">0</span>件商品，总额：<span id="total-price">0</span>元</span> </td> </tr> </tfoot> </table> <script> var checkAll = document.getElementById('check-all') var checkItems = document.getElementsByClassName('check-item') var reduceBtns = document.getElementsByClassName('reduce-btn') var addBtns = document.getElementsByClassName('add-btn') var deleteBtns = document.getElementsByClassName('delete-btn') var deleteAllBtn = document.getElementById('delete-all-btn') var totalCount = document.getElementById('total-count') var totalPrice = document.getElementById('total-price') // 全选 checkAll.onclick = function() { for (var i = 0; i < checkItems.length; i++) { checkItems[i].checked = this.checked } getTotal() } // 单选 for (var i = 0; i < checkItems.length; i++) { checkItems[i].onclick = function() { var flag = true for (var j = 0; j < checkItems.length; j++) { if (!checkItems[j].checked) { flag = false break } } checkAll.checked = flag getTotal() } } // 增加数量 for (var i = 0; i < addBtns.length; i++) { addBtns[i].onclick = function() { var countInput = this.parentNode.querySelector('.count') var count = parseInt(countInput.innerText) count++ countInput.innerText = count getSubtotal(this.parentNode.parentNode) getTotal() } } // 减少数量 for (var i = 0; i < reduceBtns.length; i++) { reduceBtns[i].onclick = function() { var countInput = this.parentNode.querySelector('.count') var count = parseInt(countInput.innerText) if (count > 1) { count-- countInput.innerText = count getSubtotal(this.parentNode.parentNode) } getTotal() } } // 计算小计 function getSubtotal(tr) { var price = tr.querySelector('td:nth-child(3)').innerText var count = tr.querySelector('.count').innerText var subtotal = parseInt(price) * parseInt(count) tr.querySelector('.subtotal').innerText = subtotal } // 删除商品 for (var i = 0; i < deleteBtns.length; i++) { deleteBtns[i].onclick = function() { var tr = this.parentNode.parentNode tr.parentNode.removeChild(tr) getTotal() } } // 删除选中商品 deleteAllBtn.onclick = function() { for (var i = 0; i < checkItems.length; i++) { if (checkItems[i].checked) { var tr = checkItems[i].parentNode.parentNode tr.parentNode.removeChild(tr) i-- } } getTotal() } // 计算总计和总额 function getTotal() { var totalCountNum = 0 var totalPriceNum = 0 for (var i = 0; i < checkItems.length; i++) { if (checkItems[i].checked) { var tr = checkItems[i].parentNode.parentNode var count = parseInt(tr.querySelector('.count').innerText) var price = parseInt(tr.querySelector('.subtotal').innerText) totalCountNum += count totalPriceNum += price } } totalCount.innerText = totalCountNum totalPrice.innerText = totalPriceNum } </script> </body> </html> ``` 该购物车功能实现了以下功能： 1. 全选/取消全选； 2. 单选/取消单选； 3. 增加/减少商品数量； 4. 计算商品小计； 5. 删除单个商品； 6. 删除选中商品； 7. 计算总计和总额。 您可以在浏览器中打开该HTML文件，进行购物车功能的使用和测试。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值