jQuery 购物车

html代码

<!--shoppingCar start-->
  <table id="TB">
   <tr>
    <td colspan="7" class="title">
     <div class="img_box">
      <div class="logo_box">
       <img src="img/jdlogo-201708-@1x.png" class="logo" />
      </div>
      <div class="img_font">购物车</div>
     </div>
     <div class="input_box">
      <input type="text" placeholder="自营" class="search" />
      <input type="button" value="搜索" class="button" />
     </div>
    </td>
   </tr>
   <tr >
    <td class="first_row">
     <input type="checkbox" id="qx"/>全选
    </td>
    <td class="second_row">商品图片</td>
    <td class="third_row">商品描述</td>
    <td class="fourth_row">单价</td>
    <td class="fifth_row">数量</td>
    <td class="sixth_row">小计</td>
    <td class="seventh_row">操作</td>
   </tr>
   <tr class="checked">
    <td class="first_row">
     <input type="checkbox" name="Put"/>
    </td>
    <td class="second_row">
     <img src="img/img_01.jpg" />
    </td>
    <td class="third_row">丹慕妮尔2016秋装新品</td>
    <td class="fourth_row">¥ <input value="199.00" style="width: 80px;"/></td>
    <td class="fifth_row"><button class="Jia">+</button><input value="1"class="Zhi"style="width: 80px;height: 20px;text-align: center;"/><button class="jian">-</button></td>
    <td class="sixth_row">¥ <input class="Xiaoji" value="199.00"style="width: 80px;"/></td>
    <td class="seventh_row"><span class="shanchu">删除</span></td>
   </tr>
   <tr tr class="checked">
    <td class="first_row">
     <input type="checkbox" name="Put"/>
    </td>
    <td class="second_row">
     <img src="img/img_02.jpg" />
    </td>
    <td class="third_row">丹慕妮尔2016秋装新品</td>
    <td class="fourth_row">¥ <input  value="38.00" style="width: 80px;"/></td>
    <td class="fifth_row"><button class="Jia">+</button><input value="1" class="Zhi"style="width: 80px;height: 20px;text-align: center;"/><button class="jian">-</button></td>
    <td class="sixth_row">¥  <input class="Xiaoji"   value="38.00"style="width: 80px;"/></td>
    <td class="seventh_row"><span class="shanchu">删除</span></td>
   </tr>
   <tr tr class="checked">
    <td class="first_row">
     <input type="checkbox" name="Put"/>
    </td>
    <td class="second_row">
     <img src="img/img_03.jpg" />
    </td>
    <td class="third_row">丹慕妮尔2016秋装新品</td>
    <td class="fourth_row">¥ <input value="277.88" style="width: 80px;"/></td>
    <td class="fifth_row"><button class="Jia">+</button><input value="1" class="Zhi"style="width: 80px;height: 20px;text-align: center;"/><button class="jian">-</button></td>
    <td class="sixth_row">¥  <input class="Xiaoji"  value="277.88"style="width: 80px;"/></td>
    <td class="seventh_row"><span id="del" class="shanchu">删除</span></td>
   </tr>
   <tr class="end">
    <td colspan="7" class="end">
     <div class="changed">
      <input type="checkbox"id="fx" />反选    
     </div>
     <div class="del">
      <input id="SHAN" type="button" value="删除已选" />    
     </div>
     <div class="clearing"> 
      <div class="font">已选择<span id="totalAmount">0</span>件商品&nbsp;总价¥<span id="totalPrice">0.00</span></div>
      <input type="button" value="去结算" />
     </div>
    </td>
   </tr>
  </table>
  <!--shoppingCar end-->

js代码

//全选
$("#qx").click(function(){
 $("[name='Put']").prop("checked",$("#qx").prop("checked"));
 show();
 zong();
});
//反选
$("#fx").click(function(){
 $("[name='Put']").each(function(){
  $(this).prop("checked",!$(this).prop("checked"))
 })
 show();
 zong();
});
//单选
$("[name='Put']").click(function(){
 show();
 zong();
})
//方法
function show(){
 $("[name='Put']").each(function(){
 if ($("[name='Put']:checked").length==$("[name='Put']:checkbox").length) {
  $("#qx").prop("checked",true);
 } else{
  $("#qx").prop("checked",false);
 }
 })
}
//删除
$(".shanchu").click(function(){
 $(this).parents('.checked').remove();
 zong();
});
//数量的增加/减少
$(".Jia").click(function(){
 $(this).next().val(parseInt($(this).next().val())+1);
 $(this).parent().next().find(".Xiaoji").val(($(this).next().val()*$(this).parent().prev().find("input").val()).toFixed(2));
 zong();
});
$(".jian").click(function(){
 if($(this).prev().val()>1){
  $(this).prev().val(parseInt($(this).prev().val())-1);
  $(this).parent().next().find(".Xiaoji").val(($(this).prev().val()*$(this).parent().prev().find("input").val()).toFixed(2))
 }
 zong();
});
//删除已选
$("#SHAN").click(function(){
 $("[name='Put']").each(function(){
  if($(this).prop("checked")){
   $(this).parents(".checked").remove();
  }
 });
 zong();
});
//总价
function zong(){
 var totalA=0;
 var totalP=0;
 $("[name='Put']").each(function(){
  if ($(this).prop('checked')) {
   var shul=parseFloat($(this).parent().siblings(".fifth_row").find(".Zhi").val());
   totalA+=shul;
   var qian=parseFloat($(this).parent().siblings(".sixth_row").find(".Xiaoji").val());
   totalP+=qian;
  }
 });
 $("#totalAmount").text(totalA);
 $("#totalPrice").text(totalP);
};

 

转载于:https://www.cnblogs.com/wangchaoa/p/10301225.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/278260.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL优化总结

2019独角兽企业重金招聘Python工程师标准>>> 从这几天看MySQL性能优化来看&#xff0c;基本的思路就是分分分&#xff0e;&#xff0e;&#xff0e; 1&#xff0c;分读&#xff0c;用缓存来分摊读表的压力; 2&#xff0c;读写分离&#xff0c;主从分离&#xff0c;写…

疯狂java讲义

封装&#xff1a; 封装&#xff1a;将对象状态信息隐藏在对象内部&#xff0c;不允许外部程序直接访问对象内部信息&#xff0c;而是用类所提供的方法访问和操作。访问控制符&#xff1a;private&#xff08;当前类访问权&#xff09; ,protected&#xff08;子类访问&#xff…

将背景色添加到Word 2007文档中

Instead of using the standard white background with Word documents, here is how to add some background color to spice up your documents. 代替在Word文档中使用标准的白色背景&#xff0c;这是如何添加一些背景颜色来为文档增添色彩。 Open your word document and ch…

jquery实现增删改(伪)-老男孩作业day13

使用jquery进行&#xff0c;文件的编写&#xff0c;实现自增id,删除&#xff0c;添加&#xff0c;编辑模式。 jquery放在本地&#xff0c;src"jquery_js.js" 可以改成其他&#xff0c;或者在线的路径 readme<!DOCTYPE html> <html lang"en"> &…

uoj#119. 【UR #8】决战圆锥曲线(线段树+复杂度分析)

题解 传送门 题解 然而要我来说我感觉只是个爆搜啊…… //minamoto #include<bits/stdc.h> #define R register #define ll long long #define ls (p<<1) #define rs (p<<1|1) #define fp(i,a,b) for(R int ia,Ib1;i<I;i) #define fd(i,a,b) for(R int ia…

如何在Raspberry Pi上设置两因素身份验证

Kiklas/ShutterstockKiklas /快门The Raspberry Pi is everywhere now, which is why it’s caught the eye of threat actors and cybercriminals. We’ll show you how to secure your Pi with two-factor authentication. Raspberry Pi现在无处不在&#xff0c;这就是为什么…

Laravel Passport里的授权类型介绍

本文来自pilishen.com----原文链接; 欢迎来和pilishen一起学习php&Laravel&#xff1b;学习群&#xff1a;109256050OAuth2是一个安全框架&#xff0c;控制着程序受保护部分的准入&#xff0c;主要是控制不同的客户端如何来调取API&#xff0c;保证它们在请求相应资源的时候…

vue 开发环境搭建

1.创建vue项目 1.node js 生成项目&#xff0c;编译项目 2.hbuilder 开发环境 1.下载安装node js http://nodejs.cn/download/ 确认是否安装成功 如果安装不了 代码错误2503 解决方法&#xff1a; 管理员命令运行cmd; cd\ cd C:\Users\Administrator\Desktop msiexec/package n…

iphone视图放大_如何将iPhone用作放大镜

iphone视图放大It’s a common problem: Some things are just too hard to see. Usually, they’re too far away, too dark, or too small. With a feature called Magnifier, your iPhone can function as a magnifying glass and sight aid. Here’s how to use it. 这是一…

chmod权限

本文引用:https://www.cnblogs.com/zhangym/p/5826200.html linux数字权限解释 644 第一位代表文件所有者的权限,第二位代表同组用户的权限&#xff0c;第三位代表其他用户的权限. 读取权限等于4,用r表示;写入权限2,用w表示;执行权限1,用x表示. 通过4、2、1组合,得到以下几种权…

输出最大值MXNet实现

网络结构&#xff0c;输入为2个数&#xff0c;先经过10个节点的全连接层&#xff0c;再经过10个节点的ReLu&#xff0c;再经过10个节点的全连接层&#xff0c;再经过1个节点的全连接层&#xff0c;最后输出。 #-*-coding:utf-8-*- import logging import math import random im…

discord linux_如何在Discord中应用文本格式

discord linuxDiscord allows for text-and audio-based chatting between gamers and other like-minded individuals. If you want to make a bigger impact on Discord, you can use formatting to jazz up your text-based messages. Here’s how. Discord允许游戏玩家和其…

一张图看懂阿里云网络产品[十二]云企业网

2019独角兽企业重金招聘Python工程师标准>>> 摘要&#xff1a; 阿里云致力于为用户提供优质、高效、稳定的网络传输环境&#xff0c;云企业网&#xff08;Cloud Enterprise Network&#xff09;将提供一种能够快速构建混合云和分布式业务系统的全球网络&#xff0c;…

# 2019-2020.3 《java程序设计》第一周学习总结

2019-2020-3 《Java 程序设计》第一周学习总结 在本周的学习中&#xff0c;学习到了好多也收获了好多&#xff0c;从最基础的安装虚拟机开始&#xff0c;根据老师的博客中的教程一步一步的进行&#xff0c;在这过程中也遇到了好多问题&#xff0c;因为是初步接触Linux系统&…

聊聊Java反射

反射是Java最重要的特性。通过Java反射可以在运行时知道一个类的所有成员和方法&#xff0c;知道一个对象的类类型、成员和方法的所有信息&#xff0c;进而调用对象的方法或生成对象的代理或包装类。Java是面向对象语言&#xff0c;除了静态变量或原始数据类型外都是完全面向对…

01. 把存储过程结果集SELECT INTO到临时表

原文:01. 把存储过程结果集SELECT INTO到临时表在开发过程中&#xff0c;很多时候要把结果集存放到临时表中&#xff0c;常用的方法有两种。 一. SELECT INTO 1. 使用select into会自动生成临时表&#xff0c;不需要事先创建 select * into #temp from sysobjects select * fro…

day5学python 基础+装饰器内容

基础装饰器内容 递归特性# 1.必须有一个明确的结束条件# 2.每次进入更深一层递归时&#xff0c;问题规模相比上次递归应有所减少# 3.递归效率不高 def run(n):print(n)if int(n/2)>0:return run(n / 2)print("-->",n) run(10) 局部变量与全局变量知识 1.全局变…

如何在Windows 10上跳过回收站以删除文件

Windows 10 normally sends files you delete to the Recycle Bin. They’ll be kept until you empty it—or, in some cases, until Windows 10 automatically empties your Recycle Bin. Here’s how to skip the Recycle Bin and delete files immediately. Windows 10通常…

OSChina 周日乱弹 —— 我叫张一条

2019独角兽企业重金招聘Python工程师标准>>> Osc乱弹歌单&#xff08;2018&#xff09;请戳&#xff08;这里&#xff09; 【今日歌曲】 莱布妮子 &#xff1a;分享Lube的单曲《Skoro dembel》 《Skoro dembel》- Lube 手机党少年们想听歌&#xff0c;请使劲儿戳&am…

面向对象初识

一. 面向对象初识 1.1 回顾面向过程编程vs函数式编程 # 面向过程编程 测量对象的元素个个数。 s1 fjdsklafsjda count 0 for i in s1:count 1l1 [1,2,3,4] count 0 for i in l1:count 1 面向过程编程def func(s):count 0for i in s:count 1return count …