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

?