<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <link rel="stylesheet" type="text/css" href="css/Bootstrap4.css"/>
      <form action="">
         <table border="" cellspacing="" cellpadding=""width="800px">
            
         
         <tr>
            <th>选择</th>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>小计</th>
            <th>操作</th>
         </tr>
         <tr>
            <th><input type="checkbox" name="" id="" value="" /></th>
            <th>电车</th>
            <th>9.9</th>
            <th><button type="button"class="jian">-</button>
            <span>1</span>
            <button type="button" id="jia">+</button></th>
            <th>9.9</th>
            <th><button type="button"onclick="fun3(this)">删除</button></th>
         </tr>
         <tr>
            <th><input type="checkbox" name="" id="" value="" /></th>
            <th>电车</th>
            <th>9.9</th>
            <th><button type="button" class="jian">-</button>
            <span>1</span>
            <button type="button"id="jia">+</button></th>
            <th>9.9</th>
            <th><button type="button"onclick="fun3(this)">删除</button></th>
         </tr>
         <tr>
            <th><input type="checkbox" name="" id="" value="" /></th>
            <th>电车</th>
            <th>9.9</th>
            <th><button type="button"class="jian">-</button>
            <span>1</span>
            <button type="button" id="jia">+</button></th>
            <th>9.9</th>
            <th><button type="button"onclick="fun3(this)">删除</button></th>
         </tr>
         <tr>
            <th><input type="checkbox" name="" id="" value="" /></th>
            <th>电车</th>
            <th>9.9</th>
            <th><button type="button"class="jian">-</button>
            <span>1</span>
            <button type="button"id="jia">+</button></th>
            <th>9.9</th>
            <th><button type="button"onclick="fun3(this)">删除</button></th>
         </tr>
         
         
         </table>
         <button type="button"class="btn btn-primary all"onclick="fun()">全选</button>
         <button type="button" class="btn btn-danger allno"onclick="fun1()">全不选</button>
         <button type="button" class="btn btn-danger  allf"onclick="fun2()">反选</button>
         <button type="button" class="btn btn-danger  allw"onclick="fun4()">批量删除</button>
      </form>
   </body>
</html>
<script src="new_file.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
   //-号
   $('.jian').click(function(){
   var aww=$(this).next().text();
   aww--;
var    last=aww--<=1 ? 1 : aww--;//最终的数量
   $(this).next().text(last)
   var dj=$(this).parent().prev().text()
   var xj=last*dj
   var xj=$(this).parent().next().text(xj.toFixed(1))
   
   })
   
   
   
   //+号
   $('#jia').click(function(){
   var aqq=$(this).prev().text();
      aqq++;
      $(this).prev().text(aqq);//最终的数量
   var dj=$(this).parent().prev().text();
   var xj=aqq*dj
      var xj=$(this).parent().next().text(xj.toFixed(1))
      
   })
   
   
   
   
   //批量删除
   function fun4(){
   var aqq=$(':checkbox:checked')
   for(var i=0;i<aqq.length;i++){
         aqq[i].parentNode.parentNode.remove()
   }
   }
   
   
   
   
   //这是删除
   function fun3(tag){
      tag.parentNode.parentNode.remove()
   }
   
   
   
   
   //全选
   // $(".all").click(function(){
   //     var check=$(":checkbox")
   //     $(check).each(function(k,v){
   //     v['checked']=true
   // })
   // }
      //这一步是反选
      function fun2(){
         var add=$(":checkbox")
         for(var i=0;i<add.length;i++){
            if(add[i]["checked"]){
               add[i]["checked"]=false
            }else{
               add[i]['checked']=true
            }
         }
         
      }
      
      
   //这一步是全选
   function fun(){
      var add=$(":checkbox")
      for(var i=1;i<add.length;i++){
         add[i]["checked"]=true
         
      }
   }
   //这一步是全不选
   function fun1(){
      var add=$(":checkbox")
      for(var i=0;i<add.length;i++){
         add[i]["checked"]=false
      }
   }
   
</script>



jq 简易购物车功能实现的更多相关文章

  1. vue 入门 ------简单购物车功能实现(全选，数量加减，价格加减）

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  2. 购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能

    效果图: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  3. javaweb练手项目jsp+servlet简易购物车系统

    简易购物车项目 这是一个用intellij IDEA做的简易的javaweb项目,开发环境使用的jdk1.8和tomcat8以及mysql数据库. 1.项目开发准备: 创建github仓库 项目框架搭 ...

  4. Android 购物车功能的实现

    首先,众所周知,ListView是Android最常用的控件,可以说是最简单的控件,也可以说是最复杂的控件. 作为一个Android初级开发者,可能会简单的ListView展示图文信息. 作为一个有一 ...

  5. 【JSP】Cookie的使用及保存中文，并用Cookie实现购物车功能

    Cookie是服务器存放在客户端的一些数据,比如密码,以及你曾经访问过的一些数据. 设置Cookie //设置cookie Cookie cookie = new Cookie("TOM&q ...

  6. 给destoon商城的列表中和首页添加购物车功能

    如何给destoon商城的列表中和首页添加购物车功能? 目前加入购物车的功能只存在商城的详细页面里,有时候我们需要批量购买的时候,希望在列表页就能够使用这个加入购物车的功能. 修改步骤见下: 例如在商 ...

  7. ASP.NET之电子商务系统开发-2(购物车功能)

    一.前言 继上次的首页数据列表后,这是第二篇.记录一下购物车这个比较庞大的功能,可能实现的方法跟其他人有点不一样,不过原理都差不多,是将cookie存数据库里面的. 二.开始 首先看一下购物车流程及对 ...

  8. jQuery 复制节点的元素实现加入到购物车功能

    描写叙述: 用户点击左边div中的商品,相应商品会自己主动加入到右面的div中,类似电子商城中的加入到购物车功能. 主要用到了jquery中的复制节点功能,基本原理是首先获取点击的元素,然后将对应信息 ...

  9. 微信小程序之购物车功能

    前言 以往的购物车,基本都是通过大量的 DOM 操作来实现.微信小程序其实跟 vue.js 的用法非常像,接下来就看看小程序可以怎样实现购物车功能. 需求 先来弄清楚购物车的需求. 单选.全选和取消, ...

随机推荐

  1. Thread的打断

    常用方法 public void interrupt() t.interrupt() 打断t线程(设置t线程某给标志位f=true,并不是打断线程的运行),不能打断正在竞争锁的线程. public b ...

  2. TableView载入WebView的一些小技巧 By 徐

    开发APP的时候,有时候会遇到服务器返回来的数据是一堆html内容,但是又不一定是完整的html ,可能只包含了主要内容,包括一些图片,文字等 然而我们处理带有html标签的数据时,用webview是 ...

  3. Kubernetes二进制（单/多节点）部署

    Kubernetes二进制(单/多节点)部署 目录 Kubernetes二进制(单/多节点)部署 一.常见的K8S部署方式 1. Minikube 2. Kubeadmin 3. 二进制安装部署 4. ...

  4. 简述redis集群的实现原理

    在哨兵sentinel机制中,可以解决redis高可用问题,即当master故障后可以自动将slave提升为master,从而可以保证redis服务的正常使用,但是无法解决redis单机写入的瓶颈问题 ...

  5. Node.js躬行记（15）——活动规则引擎

    在日常的业务开发中,会包含许多的业务规则,一般就是用if-else硬编码的方式实现,这样就会增加逻辑的维护成本,若无注释,可能都无法理解规则意图. 因为一旦规则有所改变,那么就需要修改代码再发布代码, ...

  6. Spring系列12： `@Value` `@Resource` `@PostConstruct` `@PreDestroy` 详解

    本文内容 @Resource实现依赖注入 @Value详细使用 @PostConstruct @PreDestroy的使用 @Resource实现依赖注入 前面章节介绍了使用@Autowired注入依 ...

  7. Linux系统安装（CentOS-7）详细操作步骤

    Linux系统安装(CentOS-7)详细操作步骤 一.创建虚拟机 首先创建一个虚拟机,然后才能在虚拟机里面安装系统. 第一步,创建虚拟机的向导 第二步,兼容性默认即可. 第三步,我们等创建完虚拟机后 ...

  8. .NET官方封装的Win32API类库

    大部分朋友在使用C#.NET调用Win32API时都不清楚API函数的声明,要么就是抄网上的代码,但是总会遇到各种各样奇奇怪怪难以解决的问题,打算自己封装又发现工作量实在太大. 其实完全没有必要自己动 ...

  9. Redis持久化、主从与哨兵架构详解

    目录 Redis持久化 RDB快照(snapshot) AOF(append-only file) AOF重写 Redis 4.0 混合持久化 Redis数据备份策略: Redis主从架构 Redis ...

  10. 通过JAVA对FTP服务器连接，上传，下载，读取，移动文件等

    记录一次对FTP服务器文件内容 通过Java程序对FTP服务器文件处理:连接,上传,下载,读取,移动文件等. 需求描述:今天接到一个任务,在Java项目中,读取FTP服务器上的一些文件,进行一些业务操 ...