带全选按钮的小型购物车案例

已于 2022-07-07 21:43:12 修改
阅读量278 收藏
点赞数 4
文章标签： 前端 html5 javascript css vue.js
于 2022-07-06 22:37:14 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71454352/article/details/125649005
版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>

        //希望大家注意先引入jQuery.js文件，再引入vue.min.js文件
        <script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #table{
                width: 900px;
                height: 100px;
                margin: 25px auto;
            }
            thead{
                background-color: #5BC0DE;
            }
            tr th,tr td{
                text-align: center;
                font-family: "宋体";
                font-size: 25px;
            }
            tr td{
                width: 50px;
                height: 80px;
            }
            #foot{
                font-family: "宋体";
                font-size: 25px;
            }
            #foot strong{
                font-size: 35px;
            }
        </style>
    </head>
    <body>
        <div id="table" >
            <div v-if="list.length">
                <table class="table table-bordered table-hover table-striped">
                    <thead>
                        <tr>
                            <!-- 全选按钮 -->
                            <th>全选 <input type="checkbox" id="all" @click="allClick()"  /></th>
                            <th>商品名称</th>
                            <th>商品图片</th>
                            <th>商品单价</th>
                            <th>购买数量</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(item,index) in list">
                            <!-- 单选按钮 -->
                            <td><input type="checkbox" :checked="item.check" @click="select(index)" /></td>
                            <td>{{item.name}}</td>
                            <td><img :src="item.imag" class="img-responsive" ></td>
                            <td>{{item.price}}</td>
                            <td>
                                <button type="button" :disabled="item.num == 1" @click="reduct(index)">-</button>
                                {{item.num}}
                                <button type="button" @click="add(index)">+</button>
                            </td>
                            <td><button type="button" @click="del(index)" >移除</button></td>
                        </tr>
                    </tbody>
                </table>
                <div id="foot">
                    总价：<strong>￥{{allPrice}}</strong>
                </div>
            </div>
            <div v-else>
                <h1 style="font-family: '宋体'; color: crimson; margin: 30% 40%;">购物车内无商品</h1>
            </div>
        </div>
    </body>
    <script src="js/index.js" type="text/javascript" charset="utf-8"></script>
</html>

// index.js

var obj = new Vue({
    el:'#table',
    data:{
        list:[
            {
                name:'iPhone 7',
                price:6188,
                num:1,
                check:true,
                imag:'img/1.webp'
            },
            {
                name:'iPad Pro',
                price:5888,
                num:1,
                check:false,
                imag:'img/2.webp'
            },
            {
                name:'MacBook Pro',
                price:21488,
                num:1,
                check:false,
                imag:'img/3.webp'
            }
        ]
    },
    methods:{
        // 移除
        del:function(index){
            if(confirm('你确定要移除此商品吗？')){
                this.list.splice(index,1);
            }
        },
        // 增加
        add:function(index){
            this.list[index].num++;
        },
        // 减少
        reduct:function(index){
            this.list[index].num--;
        },
        // 全选
        allClick : function(){
            // 首先，获取到全选按钮，赋给变量isAll
            let isAll = document.getElementById('all');
            // 如果全选按钮被选中，单选按钮就全部选中  == >  list数组的check属性变为true
            if(isAll.checked == true){
                this.list.forEach(function(item,index){
                    item.check = true;
                })
            }else{
                this.list.forEach(function(item,index){
                    item.check = false;
                })
            }
        },
        // 单选
        /* 思路：
        1、先获取到全选按钮
         2、设一个变量n，循环list表中的数据，如果表内check为true是让n的数量自增加
         3、当n的数量长度等于list的数据长度时，全选按钮为true
         4、当n的数量长度不等于list的数据长度时，全选按钮为false
         */
        select:function(index){
            this.list[index].check = !this.list[index].check;
            let isAll = document.getElementById('all');
            let n = 0;
            for (var i = 0; i<this.list.length;i++){
                if(this.list[i].check == true){
                    n++
                }
            }
            if( n == this.list.length){
                isAll.checked = true
            }else{
                isAll.checked = false
            }
        }
        
    },
    computed:{
        allPrice:function(){
            let total = 0;
            this.list.forEach(function(val,index){
                if(val.check == true){
                    total += parseFloat(val.num * val.price);
                }
            })
            return total.toString().replace(/\B(?=(\d{3})+$)/g,',');//每三位数中间加个“,”
        }
        
    }
    
})

最后，希望可以得到大家的建议，谢谢大家，（本人的第一篇博客，谢谢大家支持）

越过难题
关注
js全选按钮的实现方法
11-22
本文实例讲述了js全选按钮的实现代码。分享给大家供大家参考。具体如下： 运行效果截图如下：   具体代码如下 <html> <head> <title>复选框checked属性</title> [removed] function ...
vue html项目,Html|Vue实战小项目-购物车
weixin_34669890的博客
06-14 159
Title全选商品名称商品单价购买数量金额(元)操作{{ item.name }}{{ item.price }}-{{ item.count }}+{{ ofPrice(index) }}移除总价: ￥ {{ totalPrices }}购物车没有商品var app = new Vue({el: '#app',data: {list: [{id: 1,name: '矿泉水',price: 2,c...
【Web】input标签一键全选处理
weixin_61972561的博客
12-30 663
【代码】【Web】input标签一键全选处理。
【Web应用技术基础】JavaScript(4)——案例：全选/取消全选按钮
最新发布
m0_74164458的博客
04-07 215
【Web应用技术基础】JavaScript(4)——案例：全选/取消全选按钮1.点击全选按钮，则选中所有选项。2.只要某个选项取消，则自动取消全选按钮的勾选状态。
web页面全选实现方法
qq_40366444的博客
05-24 3630
工具：js包：jquery-1.4.4.min.js //要全选的数据 <input type="checkbox" name="id[]" value="" /> 按钮 <input type="checkbox" id="checkall"/>全选 </td> <a href="javascript:void(0)" class="button bo...
Web前端第四季(jQuery):五:402-全选和全不选功能+403-属性选择器和属性设置+501-二级省市联动
qq_40544338的博客
12-27 928
目录 一.目的 1.想：学习前端知识 2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school官网:当做字典使用 4.菜鸟教程：当做字典使用 5.Web前端第一季(HTML):我自己写的笔记博客 6.Web前端第二季(CSS):我自己写的笔记博客 7.Web前端第三季(JavaScript):我自己写的笔记博客 三.注意 操作:1:成功:402-全选和全不选功能 1.运行..
关于购物车全选反选按钮
12-11
对于MyTaobaoTest.zip和购物车功能全选.zip这两个文件，它们可能包含了具体的项目代码或测试案例，可以作为进一步理解和学习此功能的参考资料。通过阅读和分析这些代码，可以更深入地理解全选按钮的实现细节。
案例：购物车案例模块-全选
01-18
"购物车案例模块-全选"通常是指在购物车页面上实现的全选功能，允许用户一键选择所有商品。这个案例可能涵盖了前端开发、用户交互设计以及后端数据处理等多个方面。下面我们将详细探讨相关的知识点。 1. **前端开发...
购物车全选实现
11-02
同时，当用户单独修改某个商品的选中状态时，我们需要禁用全选按钮，因为此时已存在未被选中的商品。 购物车全选实现不仅提高了用户体验，还涉及到前端和后端的协作。在实际项目中，还需要考虑性能优化，如分批更新...
淘宝购物车全选js
04-13
"淘宝购物车全选js"这个话题主要涉及JavaScript技术在实现购物车全选功能中的应用。JavaScript是一种轻量级的解释型编程语言，常用于网页和网络应用的前端开发，可以实现实时的用户交互。 1. **全选按钮功能**： ...
前端学习（1009）：全选按钮上
歌谣的博客
04-30 216
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
html 全选按钮
weixin_43986060的博客
02-19 6525
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script&gt; function checkAll(ck){ var arr=document.getElementsByNam
DOM操作---表单全选按钮和取消全选按钮
weixin_43188011的博客
09-18 714
DOM操作—表单全选按钮和取消全选按钮 【案例】表单全选按钮和取消全选按钮 业务需求： 1：点击上面全选复选框，下面所有的复选框都选中（全选）。 2：再次点击全选复选框，下面所有的复选框都不选中(取消全选)。 3：如果下面复选框全部选中，上面全选按钮就会自动选中。 4：如果下面复选框有一个没有选中，上面全选按钮就不选中。 5：所有复选框一开始默认都是没选中状态。 【案例分析】 1：全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可。 2：下面复选框需要全部选中，上面全
全选按钮（dom查询）
weixin_46099312的博客
02-24 292
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl...
js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码
热门推荐
且听风吟
09-01 2万+
今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下： Document 你的呢爱好很广泛！！ 全选/全不选 足球 篮球 游泳 唱歌 // 处理全选 document.getElementById('checkall').onclick=function(){ /*********************
使用JavaScript实现全选（全不选）按钮
qq_41586079的博客
10-18 7411
有如下案例，使用JavaScript实现全选（全不选）按钮。 这个按钮在实际开发中也是很常用的，我就把我的源码附上 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;多选框练习&lt;/title&gt;
点击button按钮实现全选_全选按钮的实现及事件的处理
weixin_39828715的博客
12-29 1350
这种全选的效果在后台是很需要的，因为有时候数据很多，如果想删除全部的数据，没有全选按钮岂不是很麻烦，所以很有必要实现这种全选的效果，并执行相关的事件，下面就来看看如何实现先来看看第一种方法：首先先布局好全选和控件中复选框按钮，全选按钮我们使用html控件中复选框全选数据项就采用web控件中的复选框：代码如下全选Js事件function changeState(isChecked){var chk_...
全选按钮和取消全选按钮，购物车表单
04-24
怎么实现？ 要实现全选按钮和取消全选按钮功能，可以在购物车表单中添加一个全选的复选框。当全选复选框被选中时，购物车表单中的所有商品都应该被选中，否则所有商品都取消选中。要实现这个功能，可以使用JavaScript跟踪复选框的状态，然后设置每个商品的选中状态来反映全选状态。对于取消全选按钮，可以简单地将所有商品的选中状态都设置为false。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

越过难题

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值