JQ:
$(function(){
//全选改变事件
$(".checkAll").change(function(){
// alert($(this).prop("checked"));
$(".checkAll,.check").prop("checked",$(this).prop("checked"));
if($(this).prop("checked")){
$(".check").parents(".trs").addClass("cs1");
}else{
$(".check").parents(".trs").removeClass("cs1");
}
});
//子勾选框的点击事件
$(".check").click(function(){
// alert($(".check:checked").length);
if($(".check:checked").length==3){
$(".checkAll").prop("checked",true);
}else{
$(".checkAll").prop("checked",false);
}
if($(this).prop("checked")){
$(this).parents(".trs").addClass("cs1");
}else{
$(this).parents(".trs").removeClass("cs1");
}
})
//数量点击增加,并改变总计金额的价钱
$(".add").click(function(){
//获取数量值
var n=$(this).siblings(".num").val();
n++;
$(this).siblings(".num").val(n);//把每次+1的数量赋值给input的value
//得到当前商品的单价,并把 ¥ 去掉
var price=$(this).parent().siblings(".price").text().substr(1);
//计算当前商品的总计金额,赋值给总计一列,并保留两位小数
$(this).parent().siblings(".count").text("¥"+(price*n).toFixed(2));
getSum();
})
//数量点击减少,并改变总计金额的价钱
$(".reduce").click(function(){
var n=$(this).siblings(".num").val();
if(n==1){
return false;
}else{
n--;
}
$(this).siblings(".num").val(n);
var price=$(this).parent().siblings(".price").text().substr(1);
$(this).parent().siblings(".count").text("¥"+(price*n).toFixed(2));
getSum();
})
//总计金额根据输入的数量改变
$(".num").change(function(){
var n=$(this).val();//获取数量值
//获取当前商品的单价
var price=$(this).parent().siblings(".price").text().substr(1);
//计算当前商品的总计金额,赋值给count,并保留两位小数
$(this).parent().siblings(".count").text("¥"+(price*n).toFixed(2));
getSum();
});
//总计和总额 ,在加减数量,手动调整数量处都用到,所以可以用函数,方便多处调用
getSum();
function getSum(){
var counts=0;
var prices=0;
//计算总计
$(".num").each(function(i,ele){
counts+=parseInt($(ele).val());
})
$(".nums").text(counts);
//计算总金额
$(".count").each(function(i,ele){
prices+=parseFloat(($(ele).text()).substr(1));
})
$(".prices").text("¥"+prices.toFixed(2));
$(".check:checked").parents(".trs").addClass("cs1");
}
//点击删除按钮,删除当前商品
$(".del").click(function(){
$(this).parents("tr").remove();
getSum();//每次删除完需要重新获取一下总计和总金额
});
//删除所有商品
$(".removes").click(function(){
$(".check").parents(".trs").remove();
getSum();
})
//点击删除勾选的商品
$(".dels").click(function(){
$(".check:checked").parents(".trs").remove();
getSum();
})
})
HTML:
<table cellspacing="0">
<tr>
<td><input type="checkbox" class="checkAll">全选</td>
<td>商品</td>
<td>单价</td>
<td>数量</td>
<td>总计</td>
<td>操作</td>
</tr>
<tr class="trs">
<td><input type="checkbox" class="check" checked></td>
<td>青少年读物</td>
<td class="price">¥12.60</td>
<td><a class="reduce">-</a><input type="text" class="num" value="1"><a class="add">+</a></td>
<td class="count">¥12.60</td>
<td class="delete"><em class="del">删除</em></td>
</tr>
<tr class="trs">
<td><input type="checkbox" class="check"></td>
<td>情感书籍</td>
<td class="price">¥24.80</td>
<td><a class="reduce">-</a><input type="text" class="num" value="1"><a class="add">+</a></td>
<td class="count">¥24.80</td>
<td class="delete"><em class="del">删除</em></td>
</tr>
<tr class="trs">
<td><input type="checkbox" class="check" checked></td>
<td>心理读物</td>
<td class="price">¥2.10</td>
<td><a class="reduce">-</a><input type="text" class="num" value="2"><a class="add">+</a></td>
<td class="count">¥4.20</td>
<td class="delete"><em class="del">删除</em></td>
</tr>
<tr>
<td><input type="checkbox" class="checkAll">全选</td>
<td><em class="dels">删除选中的商品</em></td>
<td><em class="removes">清理购物车</em></td>
<td colspan="3" class="zjs">
<div class="zj">
已经选了 <span class="nums">1</span> 件商品
总计:<span class="prices">¥12.60</span>
</div>
</td>
</tr>
</table>