1. 效果图
  2. HTML代码:(非表格方式)

    <div class="nav2">
    <input type="checkbox" class="checkAll" />&emsp;全选
    <span>商品信息</span>
    <ul class="fr">
    <li>单价</li>
    <li>数量</li>
    <li>小计</li>
    <li>操作</li>
    </ul>
    </div>


    <div class="goods">
    <input type="checkbox" class="check"/>
    <span class="img"><img src="../img/d.png" /></span>
    <p class="goods_p">
    耐克(nike)802611-001 AIR<br />
    MAX减震复古休闲鞋 运动鞋 奥<br />
    利奥配色 US9码42.5码
    </p>
    <p class="goods_p1">
    颜色:黑色<br />
    尺码:40.5
    </p>
    <ul class="fr">
    <li>
    <span class="goods_sp">¥999.00</span><br />
    <span class="goods_sp1">¥<span class="price">748.00</span></span><br />
    <span class="goods_sp2">卖家促销</span>
    </li>

    <li><span class="goods_sp3"><img src="../img/jia.png" class="cut" />
    <span class="num">1</span>
    <img src="../img/jia1.png" class="add"/></span>
    </li>
    <li><span class="goods_sp4">¥<span class="total">748</span></span></li>
    <li>
    <button >移入我的收藏</button>.
    <button >删除</button>
    </li>
    </ul>

    </div>

    <div class="goods">
    <input type="checkbox" class="check"/>
    <span class="img"><img src="../img/d.png" /></span>
    <p class="goods_p">
    耐克(nike)802611-001 AIR<br />
    MAX减震复古休闲鞋 运动鞋 奥<br />
    利奥配色 US9码42.5码
    </p>
    <p class="goods_p1">
    颜色:黑色<br />
    尺码:40.5
    </p>
    <ul class="fr">
    <li >
    <span class="goods_sp">¥999.00</span><br />
    <span class="goods_sp1">¥<span class="price">748.00</span></span><br />
    <span class="goods_sp2">卖家促销</span>
    </li>

    <li><span class="goods_sp3"><img src="../img/jia.png" class="cut" />
    <span class="num">1</span>
    <img src="../img/jia1.png" class="add"/></span>
    </li>
    <li><span class="goods_sp4">¥<span class="total">748</span></span></li>
    <li>
    <button >移入我的收藏</button>.
    <button >删除</button>
    </li>
    </ul>

    </div>

    <div class="goods2">
    <input type="checkbox" class="checkAll1" />
    <span class="goods2_sp">全选</span>
    <span class="goods2_sp1"><a href="#">删除选择中的商品</a>
    &emsp;<a href="#">移到我的关注</a>
    &emsp;<a href="#">清除下柜商品</a>
    </span>

    <p class="goods2_p"> 已选择<span class="color" id="allNum">0</span>件商品
    <img src="../img/sanjiao.png" />
    </p>
    <p class="goods2_p1">
    总价:<span class="color" id="all">¥0.00</span>
    <br />
    已节省:-¥0.00
    </p>

    <button>去结算</button>
    </div>

  3. jQuery代码:

    $(function() {

    $(".add").click(function(e) {
    var quantity = parseInt($(this).prev().text());
    $(this).prev().text(quantity + 1);
    //计算每件商品总价
    var price = parseInt($(this).parents("li").prev().find(".price").text());
    var num = parseInt($(this).prev().text());
    $(this).parents('li').next().find('.total').text((price * num).toFixed(2));
    e.preventDefault()
    setTotal();
    });
    //减的计算
    $(".cut").click(function(e) {
    var quantity = parseInt($(this).next().text());

    if(quantity > 1) {
    $(this).next().text(quantity - 1);
    };

    var price = parseInt($(this).parents("li").prev().find(".price").text());
    var num = parseInt($(this).next().text());
    //小计
    $(this).parents('li').next().find('.total').text((price * num).toFixed(2));
    e.preventDefault()
    setTotal();
    });
    //计算总价
    function setTotal() {

    var total = 0;
    var totalPrice = 0;
    //$('.check').each(function() {
    //if($(this).hasClass("status")) {
    $(".status .num").each(function() {
    total += parseInt($(this).text());
    });
    $(".status .total").each(function() {
    totalPrice += parseInt($(this).text());
    });

    $("#allNum").text(total);
    $("#all").text(totalPrice);
    //}
    //});

    }

    //全选
    $('.checkAll').click(function(){
    if($('.checkAll').prop("checked")==true){
    $('.check').prop("checked",true);
    $('.check').parent().addClass("status");
    setTotal();
    }else{
    $('.check').prop("checked",false);
    $('.check').parent().removeClass("status");
    setTotal();
    }
    });
    // 单选
    $(".check").click( function(){
    $(this).each(function(){
    if($(this).prop("checked")==true){
    $(this).parent().addClass("status");//添加勾选样式
    setTotal();
    }else{
    $(this).parent().removeClass("status");//取消勾选样式
    setTotal();
    }
    });
    });});

jQuery购物车的更多相关文章

  1. JQuery购物车多物品数量的加减+总价计算

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery 购物车鼠标经过出现下拉框的做法

    这一段时间在学习web前端,最近学了jQuery库,深感其强大,下面通过写购物车的下拉框做法,把自己的理解和大家交流一下,欢迎各位大神指点指正,废话不多说,开始正题: 购物车html: <!-- ...

  3. Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  4. jQuery 购物车

    html代码 <!--shoppingCar start-->  <table id="TB">   <tr>    <td colspa ...

  5. jquery购物车添加功能

    <html> <head> <meta charset="UTF-8"> <title></title> <scr ...

  6. jQuery 购物车案例

    h1 { text-align: center; } .cart { width: 1200px; height: 600px; margin: 0 auto; border: 1px solid # ...

  7. jquery 购物车飞入效果

    github https://github.com/amibug/fly demo https://github.com/amibug/fly

  8. jquery购物车计算总价

    //计算总价 function cartTotal(){ var total = 0; //循环计算的列,选中计算的数量和价格 //accAdd为精BigDecimal准计算方法 $.each($(& ...

  9. jquery购物车全选,取消全选,计算总金额

    这是html代码 <div class="gwcxqbj"> <div class="gwcxd center"> <div cl ...

随机推荐

  1. MySQL索引创建、删除、查看

    主键索引   PRIMARY KEY索引仅是一个具有名称PRIMARY的UNIQUE索引.这表示一个表只能包含一个PRIMARY KEY,因为一个表中不可能具有两个同名的索引. ALTER TABLE ...

  2. DLL 导出函数

    DLL的链接方式分为两种:隐式链接和显式链接 DLL导出的函数 和 导出类在调用时,有些区别,这里暂时不讲,直说简单的导出函数: 隐式链接: #include "stdafx.h" ...

  3. Codeforce 水题报告

    最近做了好多CF的题的说,很多cf的题都很有启发性觉得很有必要总结一下,再加上上次写题解因为太简单被老师骂了,所以这次决定总结一下,也发表一下停课一星期的感想= = Codeforces 261E M ...

  4. 纪中集训 Day1

    今天早上起来吃饭,发现纪中伙食真的是太差了!!!什么都不热,早餐的面包还好,然后就迎来了美好的早晨= = 早上做一套题,T1T2果断秒,T3一看就是noi原题,还好看过题解会写,然后就愉快的码+Deb ...

  5. 用C++编一程序,先输出一行sun mon tue wed thu fri fri,接着使用右对齐打印出日期,像日历那样

    用C++编一程序,先输出一行sun mon tue wed thu fri fri,接着使用右对齐打印出日期,像日历那样 先输出一行sun mon tue wed thu fri fri,再提醒用户输 ...

  6. hibernate分页模糊查询

    在web项目中,显示数据一般采用分页显示的,在分页的同时,用户可能还有搜索的需求,也就是模糊查询,所以,我们要在dao写一个可以分页并且可以动态加条件查询的方法.分页比较简单,采用hibernate提 ...

  7. 线上问题debug过程(cat,grep,tr,awk,sort,uniq,comm等工具的综合使用)

    问题:发现线上到货单的数量,小于实际到货的数量. 怀疑一些隐藏的条件,将部分唯一码进行了过滤,导致数量变少. 开展了如下的跟踪流程: 1.找到其中一个明细的唯一码 grep 6180e-4b09f p ...

  8. 从 http 升级到 https 过程中遇到的一些问题

    Apple 2017年1月1号起要求Appstore 上线的应用都必须使用 https 加密请求协议,在二月份又改为建议 从 http 升级为 https 协议,此为背景. 公司做的APP同时在App ...

  9. 学好UI你必须要掌握这些技术

    转自:http://blog.sina.com.cn/s/blog_15da22ed10102x0gx.html ui设计现在已经是设计行业中的瞩目之星,无论在PC端.移动端还是游戏上都是大放异彩. ...

  10. 抓包工具Wireshark的使用

    WireShark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示网络封包的详细信息. WireShark界面简介 启动WireShark的界面如下: 选择网卡 wireshar ...