jQuery购物车

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购物车

原文：http://www.cnblogs.com/for-dream-tgt/p/6188167.html