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

jQuery 购物车相关推荐

  1. ajax异步后台存放购物车表,jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)...

    本文实例讲述了jQuery购物车插件jsorder用法.分享给大家供大家参考,具体如下: JSORDER 案例 案例一:我的菜单(点击菜名即可加入菜单) 红烧豆腐 12元 毛血旺 32元 套餐:京酱肉 ...

  2. input禁止后怎么实现复制功能_（变强、变秃）Java从零开始之JQuery购物车功能实操...

    今天实现了购物车的一些功能,包括删除添加,复制,修改值,全选,反选等. 以下是代码跟配图: js代码部分:通过各种事件实现了按钮的具体功能 $(function(){//全选功能$("#ch ...

  3. jQuery购物车完整功能实现，全代码详解（有动态效果图）

    目录 一.效果展示 : 二.主要功能介绍: 三.html代码: 四:css代码: 五.核心步骤: 六.jQuery代码(重点) 七.感谢 一.效果展示 : 二.主要功能介绍: 1.点击商品数量左右按钮 ...

  4. jQuery购物车全选总价案例

    分析 全选思路:里面3个小的复选框按钮(j-checkbox)选中状态(checked)跟着全选按钮(checkall)走 因为checked是复选框的固有属性,所以利用prop()方法获取和设置该属 ...

  5. java table修改指定行_（变强、变秃）Java从零开始之JQuery购物车功能实操

    今天实现了购物车的一些功能,包括删除添加,复制,修改值,全选,反选等. 以下是代码跟配图: js代码部分:通过各种事件实现了按钮的具体功能 $ 这是HTML页面的样板: < 页面效果 点击全选: ...

  6. jQuery购物车 商品数量加减和小计

    整体代码: <!DOCTYPE html> <html><head><meta charset="utf-8"><title& ...

  7. 商品结算页面html代码,前端开发jQuery购物车结算页面代码

    /p> < 购物车结算 .shop-total, .all-total { height: 50px; line-height: 50px; font-weight: bold; colo ...

  8. jQuery仿天猫完美加入购物车

    转载自:http://www.iteye.com/topic/1138064 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  9. 响应式手机商城页面顶部样式HTML代码

    本特效支持PC浏览器和触屏浏览器. 效果展示 http://hovertree.com/texiao/bootstrap/8/ 手机扫描二维码体验效果: HTML代码如下: <!DOCTYPE ...

最新文章

  1. 联想拯救者Y9000-ubuntu-nvidia-驱动安装
  2. 学习Python遇到的热门问题整理
  3. CNN卷积神经网络的三种基本模式（不懂的话还得多努力啊！）
  4. 时间戳转格式化日期，日期转换成时间戳
  5. SqlServer 中Binary类型的数据如何转化为字符串
  6. Abstract class虚拟类
  7. 两台服务器实现会话共享
  8. 百度之星资格赛，hdu 4825 XOR SUM
  9. linux创建网络ntfs接点,Linux系统下挂接ntfs盘时总提示module fuse not found如何解决?...
  10. 白话编程辅助工具perl2exe(Reship)
  11. Ex 6_23 一个生产系统共包含n个顺序执行的阶段..._第七次作业
  12. [git] gnutls_handshake() failed
  13. 用JavaScript编码URL？
  14. 游戏美术设计干货分享：制造“冲突”，提高画面张力
  15. leetcode笔记：Majority Element
  16. Spring中拦截器和过滤器的使用
  17. GCD中dispatch_barrier的使用方法
  18. C#里的进制与ASCII转换
  19. 2022年“研究生科研素养提升”系列公益讲座在线测评试题及解析
  20. 知识图谱嵌入经典方法（Trans系列、KG2E）

热门文章

  1. 笔记本电脑频繁自动重启_笔记本电脑自动重启是什么原因
  2. 虚拟字符设备驱动开发步骤
  3. php生成文件index.html,Typecho生成静态首页index.html文件
  4. mysql权限说法正确的是,【多选题】下面关于修改 MySQL 配置的说法中,正确的是...
  5. 计算机报名显示事务已被锁死,ORA-01591错误处理: 锁定已被有问题的分配事务处理20.18.156406挂起（转载）...
  6. Spring系列（五）：@Lazy懒加载注解用法介绍
  7. 手机技巧：手机用一段时间就发烫，如何解决？
  8. 域名相关的一些基础知识
  9. EF 实现自定义数据库字符串
  10. ui设计 网络错误_UI设计人员常犯的10个错误