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);
};