【jquery】购物车-全选与全不选,修改商品背景颜色,删除商品,增减商品数目并计算总价格

本文主要是介绍【jquery】购物车-全选与全不选,修改商品背景颜色,删除商品,增减商品数目并计算总价格,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

jquery实现购物车功能

    • 1-实现购物车全选与全不选,选中添加商品背景颜色
      • 1.1 全选和全不选
      • 1.2 选中商品添加背景
    • 2-实现购物车增减商品数目并计算价格
      • 2.1 用户通过点击“+”“-”修改商品数目
      • 2.2 用户直接通过文本框输入数值而修改商品数目
      • 2.3 计算商品总金额
    • 3-删除商品

全部代码:

https://download.csdn.net/download/sanqianjia/13287623

1-实现购物车全选与全不选,选中添加商品背景颜色

效果如下:
在这里插入图片描述

1.1 全选和全不选

分析:
1-全部思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走
2-因为checked是复选框的固有属性,此时需要利用prop()方法获取和设置该属性
3-把全选按钮状态赋值给3个小复选框就可以了
4-当每次点击小的复选框按钮时就进行判断
5-如果小复选框被选中的个数等于3就应该把全选按钮选上,否则全选按钮不选
6-当选择上面的全选时最下面的全选和所有选项都被选中
7-当选中所有的选项时,两个全选的选项也显示被选中

1.2 选中商品添加背景

分析:
1-核心思路:选中的商品添加背景,不选中移除背景即可
2-全选按钮点击:如果全选是选中的,则所有的商品添加背景,否则移除背景
3-小的复选框点击:如果是选中状态,则当前商品添加背景,否则移除背景
4-这个背景,可以通过类名修改,添加类和删除类

  // 1. 全选 全不选功能模块// 就是把全选按钮(checkall)的状态赋值给 三个小的按钮(j-checkbox)就可以了// 事件可以使用change$(".checkall").change(function() {$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));if ($(this).prop("checked")) {// 让所有的商品添加 check-cart-item 类名$(".cart-item").addClass("check-cart-item");} else {// check-cart-item 移除$(".cart-item").removeClass("check-cart-item");}getSum();});// 2. 如果小复选框被选中的个数等于3 就应该把全选按钮选上,否则全选按钮不选。$(".j-checkbox").change(function() {// if(被选中的小的复选框的个数 === 3) {//     就要选中全选按钮// } else {//     不要选中全选按钮// }// $(".j-checkbox").length 这个是所有的小复选框的个数if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {$(".checkall").prop("checked", true);} else 

这篇关于【jquery】购物车-全选与全不选,修改商品背景颜色,删除商品,增减商品数目并计算总价格的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/307655

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

hdu1496(用hash思想统计数目)

作为一个刚学hash的孩子,感觉这道题目很不错,灵活的运用的数组的下标。 解题步骤:如果用常规方法解,那么时间复杂度为O(n^4),肯定会超时,然后参考了网上的解题方法,将等式分成两个部分,a*x1^2+b*x2^2和c*x3^2+d*x4^2, 各自作为数组的下标,如果两部分相加为0,则满足等式; 代码如下: #include<iostream>#include<algorithm

电脑桌面文件删除了怎么找回来?别急,快速恢复攻略在此

在日常使用电脑的过程中,我们经常会遇到这样的情况:一不小心,桌面上的某个重要文件被删除了。这时,大多数人可能会感到惊慌失措,不知所措。 其实,不必过于担心,因为有很多方法可以帮助我们找回被删除的桌面文件。下面,就让我们一起来了解一下这些恢复桌面文件的方法吧。 一、使用撤销操作 如果我们刚刚删除了桌面上的文件,并且还没有进行其他操作,那么可以尝试使用撤销操作来恢复文件。在键盘上同时按下“C

poj 1113 凸包+简单几何计算

题意: 给N个平面上的点,现在要在离点外L米处建城墙,使得城墙把所有点都包含进去且城墙的长度最短。 解析: 韬哥出的某次训练赛上A出的第一道计算几何,算是大水题吧。 用convexhull算法把凸包求出来,然后加加减减就A了。 计算见下图: 好久没玩画图了啊好开心。 代码: #include <iostream>#include <cstdio>#inclu

uva 1342 欧拉定理(计算几何模板)

题意: 给几个点,把这几个点用直线连起来,求这些直线把平面分成了几个。 解析: 欧拉定理: 顶点数 + 面数 - 边数= 2。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#inc

uva 11178 计算集合模板题

题意: 求三角形行三个角三等分点射线交出的内三角形坐标。 代码: #include <iostream>#include <cstdio>#include <cstdlib>#include <algorithm>#include <cstring>#include <cmath>#include <stack>#include <vector>#include <

XTU 1237 计算几何

题面: Magic Triangle Problem Description: Huangriq is a respectful acmer in ACM team of XTU because he brought the best place in regional contest in history of XTU. Huangriq works in a big compa