广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery实现购物车
  • 342
分享到

jQuery实现购物车

2024-04-02 19:04:59 342人浏览 八月长安
摘要

本文实例为大家分享了Jquery实现购物车的具体代码,供大家参考,具体内容如下 1.描述 2.HTML布局 <div>         <button>全选

本文实例为大家分享了Jquery实现购物车的具体代码,供大家参考,具体内容如下

1.描述

2.HTML布局

<div>
        <button>全选</button><button>反选</button>
        <ul>
            <li>
                <input type="checkbox" name="" id="">
                商品1 单价 <i>9.99</i>
                <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
                小计: <span>0.00</span>
            </li>
            <li>
                <input type="checkbox" name="" id="">
                商品1 单价 <i>19.99</i>
                <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
                小计: <span>0.00</span>
            </li>
            <li>
                <input type="checkbox" name="" id="">
                商品1 单价 <i>99.99</i>
                <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
                小计: <span>0.00</span>
            </li>
            <li>
                <input type="checkbox" name="" id="">
                商品1 单价 <i>999.99</i>
                <button class="cut">-</button> <input type="text" value="0"> <button class="add">+</button>
                小计: <span>0.00</span>
            </li>
        </ul>
        <p>一共0件商品, 共计 0.00 元</p>
</div>

3.引入jQuery文件

<script src="js/jquery.js"></script>

4.购物车实现

4.1 点击减号,input值自减,更新小计  小计:单价*数量

$('.cut').click(function () {
        // 获取对应输入框的值
        var num = $(this).next(':text').val();
        // console.log(num);
        if (num > 0) {
            // 自减
            num--;
        }
        // 更新输入框的值
        $(this).next(':text').val(num);
        // 小计
        var add = Number($(this).prev().text() * num).toFixed(2);
        $(this).nextAll('span').text(add);
 
        getAll(); // 总计
    });​

4.2. 点击加号,input值加1,更新小计 小计:单价*数量

$('.add').click(function () {
        // 获取对应输入框的值
        var num = $(this).prev().val();
        // 自加
        num++;
        // 更新输入框的值
        $(this).prev().val(num);
        // 小计
        var add = Number($(this).siblings('i').text() * num).toFixed(2);
        $(this).nextAll('span').text(add);
 
        getAll(); // 总计
 
    });

4.3 点击全选 将li中的复选按钮都设置成被选中状态 更新总计

 $('button').eq(0).click(function () {
        // 所有的复选按钮的都选中
        $(':checkbox').prop('checked', true);
 
        getAll(); // 总计
    });

4.4 点击反选 本来被选中的复选框设为未选中,未选中的设为选中 更新总计

$('button').eq(1).click(function () {
        // 遍历每一个复选框
        $(':checkbox').each(function (i, v) {
            // console.log(!v.cheacked);
            // $(v).prop('checked',!v.checked)
            // checked属性进行取反
            v.checked = !v.checked;
        });
 
        getAll(); // 总计
    });

4.5 点击每一个复选按钮,更新总计

$(':checkbox').click(getAll);

4.6 函数getAll用于设置总计

function getAll() {
        // 定义变量,分别用于存总数和总价
        var sum = 0;
        var allnum = 0;
        // 所有被选中的复选框
        var t = $(':checkbox:checked').each(function (i, v) {
            // console.log(Number($(v).nextAll('span').text()));
            // 所有被选中的复选框小计的总和
            sum += Number($(v).nextAll('span').text());
            //所有被选中的复选框的输入框值的总和
            allnum += Number($(v).nextAll(':text').val());
        });
        // 设置p的内容
        $('p').html('<p>一共' + allnum + '件商品, 共计 ' + sum.toFixed(2) + ' 元</p>');
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: jQuery实现购物车

本文链接: https://www.lsjlt.com/news/152550.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery实现购物车
    本文实例为大家分享了jQuery实现购物车的具体代码,供大家参考,具体内容如下 1.描述 2.HTML布局 <div>         <button>全选...
    99+
    2022-11-13
  • jquery实现购物车功能
    本文实例为大家分享了jquery实现购物车功能的具体代码,供大家参考,具体内容如下 html ​<!DOCTYPE html> <html> ...
    99+
    2022-11-12
  • jquery怎么实现购物车功能
    本篇内容主要讲解“jquery怎么实现购物车功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jquery怎么实现购物车功能”吧!html<!DOCTYPE html>&l...
    99+
    2023-06-20
  • jQuery实现全部购物车功能实例
    目录一、全选二、增减商品数量三、修改商品小计四、计算总计和总和五、删除商品 六、选中商品添加背景七、html 全部核心代码今天是一些购物车的基本功能实现,全选、增减商品数量、修改商品...
    99+
    2022-11-12
  • jquery购物车实时结算特效实现思路
    复制代码 代码如下: $(function(){ $(".child_tab tr:last-child").find("td").css({borderBottom:'none'}...
    99+
    2022-11-15
    购物车 实时结算
  • 购物车实现要点
    一、购物车模块1.1购物车两种实现方式的区别:    用session保存        缺点:浏览器关闭,session失效时保存在sessio...
    99+
    2022-10-18
  • 如何使用jQuery实现购物车结算功能
    这篇文章主要介绍如何使用jQuery实现购物车结算功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下<!DOCTYPE html> <html...
    99+
    2022-10-19
  • 基于jQuery模拟实现淘宝购物车模块
    这是网页版淘宝中购物车的页面 注意给checkbox添加事件就是用change() 给button添加事件就是用click() 1、每次点击+号,根据文本框的值乘以当前商品的价格就...
    99+
    2022-11-13
  • jQuery怎么模拟实现淘宝购物车功能
    这篇文章主要讲解了“jQuery怎么模拟实现淘宝购物车功能”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jQuery怎么模拟实现淘宝购物车功能”吧!首先我们要实现的内容的需求有如下几点:1....
    99+
    2023-06-04
  • java购物车如何实现
    要实现一个Java购物车,你可以按照以下步骤进行操作:1. 创建一个`Product`类来表示商品,该类包括商品的名称、价格和数量等...
    99+
    2023-10-12
    java
  • javaweb实现购物车功能
    本篇文章讲的是如何使用javaweb相关知识模拟购物车功能 (web练手小项目) 使用到的相关知识(部分知识点在文章中简单涉及到):        html  cs  javascript  jsp  servlet   ajax  jQu...
    99+
    2023-10-24
    mybatis java mysql servlet tomcat
  • php如何实现购物车
    本文操作环境:Windows7系统、PHP7.1版,DELL G3电脑php实现购物车功能首先将前端页面布局搭出来,做到如下:<php $conn=mysql_connect("localhost","...
    99+
    2016-06-18
    php
  • vue.js如何实现购物车
    这篇文章主要介绍vue.js如何实现购物车,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.一层数据结构-全选下面这段代码和vuejs官网里面checkbox绑定很像。不明白的可以直...
    99+
    2022-10-19
  • AngularJs如何实现购物车
    这篇文章给大家分享的是有关AngularJs如何实现购物车的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。代码:<!DOCTYPE html> <htm...
    99+
    2022-10-19
  • python实现购物车功能
    本文实例为大家分享了python实现购物车功能的具体代码,供大家参考,具体内容如下 功能要求: 要求用户输入总资产,例如:2000显示商品列表,让用户根据序号选择商品,加入购物车购买...
    99+
    2022-11-13
  • Android实现淘宝购物车
    本文实例为大家分享了Android实现淘宝购物车的具体代码,供大家参考,具体内容如下 功能基本和淘宝购物车一样,商品按照店铺分类显示,全选,反选,选中商品数量变化,总价随之变化。效果...
    99+
    2022-11-12
  • JavaScript实现网页购物车
    今天是JavaScript的一个汇总,最近小编把自己曾经写过的JavaScript 网页购物车项目给整理了一下,大家可以看一下,然后自己也可以写一个网页购物车项目噢,然后我们的Jav...
    99+
    2022-11-13
  • Android实现简单购物车
    本文实例为大家分享了Android实现简单购物车的具体代码,供大家参考,具体内容如下 这里我用到的都是Android自带SDK中的资源,做了一个极其简单的购物车实现,总结购物车难点包...
    99+
    2022-11-13
  • JavaScript实现购物车案例
    本文实例为大家分享了JavaScript实现购物车功能的具体代码,供大家参考,具体内容如下 HTML结构 <!DOCTYPE html> <html lang="...
    99+
    2022-11-12
  • python购物车功能实现
    name = "gaowang" pwd = "123.abc" list_he=[]          #定义空列表,后面接收 for i in range(3):     username = input("请输入您的账号:")    ...
    99+
    2023-01-31
    购物车 功能 python
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作