借用shoppingCart插件,实现购物车的自动计价功能。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../../js/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="../../css/cart.css">
<script>
/**
* Created by Herb Steve on 2014/5/24.
*/
$(function() {
var adds=$('.add');
var mins =$('.min');
var selects = $('.goodsList input[type=checkbox]');
var prices =$('.price');
var nums =$('.num')
function getTotal(){
var total=0;
for(var i=0;i<selects.length;i++){
var select =selects.eq(i);
if(select.attr("checked")){
var num =nums.eq(i).val();
var price = prices.eq(i).text();
total = parseFloat(total)+parseFloat(num)*parseFloat(price);
}
}
$('#total').text(total.toFixed(2));
};
selects.click(function(){
getCount();
getTotal();
});
adds.on('click',function(){
var num= $(this).siblings('.num');
console.log("fasdfasd");
num.val(parseInt(num.val())+1);
getTotal();
});
nums.on('change',function(){
getTotal();
});
mins.on('click',function(){
var num =$(this).siblings('.num');
if(num.val()>1) {
num.val(parseInt(num.val()) - 1);
getTotal();
}
});
$('.common #selectAll').on("click",function(){
for(var i=0;i<selects.length;i++){
selects.eq(i).attr("checked",true);
}
getCount();
getTotal();
});
$(' #cancel').on("click",function(){
for(var i=0;i<selects.length;i++){
selects.eq(i).attr("checked",false);
}
getTotal();
$('#count').text(0);
});
function getCount(){
var count=0;
for( var i=0;i<selects.length;i++){
if(selects.eq(i).attr("checked")){
count++;
}
}
$('#count').text(count);
}
});
</script>
</head>
<body>
<div class="shoppingCart">
<div class="header">
<div class="Content">
<span class="common firstTab">选中</span>
<span class="common secondTab">商品</span>
<span class="common thirdTab">单价</span>
<span class="common fourthTab">数量</span>
<span class="common lastTab">操作</span>
</div>
</div>
<div class="goodsList">
<div class="listContent">
<span class="firstTab common">
<input type="checkbox"/>
</span>
<div class="secondTab common">
<img class="goodsImg" src="../../img/1.jpg">
<a class="goodsLink" href="">
做最好用的平板做最好用的平板
做最好用的平板
做最好用的平板
</a>
</div>
<span class="thirdTab common price specialItem ">1499</span>
<div class="fourthTab common">
<input type="button" class="min" value="-">
<input type="text" class="num" value="1">
<input type="button" class="add" value="+">
</div>
<a class="lastTab common" href="">删除</a>
</div>
</div>
<div class="goodsList">
<div class="listContent">
<span class="firstTab common">
<input type="checkbox"/>
</span>
<div class="secondTab common">
<img class="goodsImg" src="../../img/1.jpg">
<a class="goodsLink" href="">
做最好用的平板做最好用的平板
做最好用的平板
做最好用的平板
</a>
</div>
<span class="thirdTab common price specialItem ">1499</span>
<div class="fourthTab common">
<input type="button" class="min" value="-">
<input type="text" class="num" value="1">
<input type="button" class="add" value="+">
</div>
<a class="lastTab common" href="">删除</a>
</div>
</div>
<div class="goodsList">
<div class="listContent">
<span class="firstTab common">
<input type="checkbox"/>
</span>
<div class="secondTab common">
<img class="goodsImg" src="../../img/1.jpg">
<a class="goodsLink" href="">
做最好用的平板做最好用的平板
做最好用的平板
做最好用的平板
</a>
</div>
<span class="thirdTab common price specialItem ">1499</span>
<div class="fourthTab common">
<input type="button" class="min" value="-">
<input type="text" class="num" value="1">
<input type="button" class="add" value="+">
</div>
<a class="lastTab common" href="">删除</a>
</div>
</div>
<div class="footer">
<div class="Content">
<div class="common">
<input class="selectBtn" id="selectAll" type="button" value="全选">
<input class="selectBtn" id="cancel" type="button" value="取消选择">
</div>
<div class="common count" >
选中商品数:
<span id="count" class="specialItem">
0
</span>
</div>
<div class="common total">
总金额:<span id="total" class="specialItem">0.00</span>
</div>
</div>
</div>
</div>
</body>
</html>
实现的效果图如下: