CSS代碼：
<style>
* {
margin: 0;
padding: 0;
}
body {
width: 960px;
margin: 20px auto;
}
#cart {
margin: 0 auto;
width: 850px;
}
#cart-header {
height: 40px;
background-color: lightgray;
margin-bottom: 20px;
}
#cart-header div {
line-height: 40px;
}
.left {
float: left;
}
.right {
float: right;
}
.w110 {
width: 100px;
}
.ml10 {
margin-left: 10px;
}
.w120 {
width: 120px;
}
.w250 {
width: 250px;
}
.center {
text-align: center;
}
.w20 {
width: 20px;
}
.w90 {
width: 90px;
}
.clear {
clear: both;
}
#cart-items>div {
height: 100px;
}
#cart-items>div>div {
line-height: 100px;
}
.w250 span {
display: inline-block;
font-size: 12px;
line-height: 16px !important;
}
.single-item {
border-bottom: 1px solid gray;
}
.small-button{
display: inline-block;
width: 20px;
height: 20px;
border: none;
}
.big-button {
color: white;
background-color: red;
display: inline-block;
width: 120px;
height: 40px;
border: none;
font-size: 22px;
}
#totalCount, #totalPrice {
color: red;
}
#totalPrice {
font: bolder 20px Arial;
display: inline-block;
width: 150px;
}
#cart a {
text-decoration: none;
}
#cart a:link, #cart a:visited, #cart a:active {
color: gray;
}
</style>
HTML代碼：
<body>
<div id="cart">
<div id="cart-header">
<div class="left w110 ml10">
<input id="selectAll" type="checkbox">
<label for="selectAll">全選</label>
</div>
<div class="left w250">商品</div>
<div class="left w120 center">單價(jià)</div>
<div class="left w120 center">數(shù)量</div>
<div class="left w120 center">小計(jì)</div>
<div class="left w120 center">操作</div>
</div>
<div id="cart-items">
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a1.jpg">
</a>
</div>
<div class="left w250">
<span>
海瀾之家/Heilan Home春裝商務(wù)白襯衫男修身HNCAD3A067Y 漂白(69) 漂
</span>
</div>
<div class="left w120 center">¥<span class="price">138.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥<span>138.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">刪除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a2.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海瀾之家長(zhǎng)袖襯衫男牛津紡休閑干凈透氣HNEAJ1E048A淺灰
</span>
</div>
<div class="left w120 center">¥<span class="price">128.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥<span>128.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">刪除</a>
</div>
</div>
<div class="clear single-item">
<div class="left w20 ml10">
<input name="selectOne" type="checkbox">
</div>
<div class="left w90">
<a href="">
<img src="img/a3.jpg">
</a>
</div>
<div class="left w250">
<span>
HLA海瀾之家牛津紡清新休閑襯衫2018春季新品質(zhì)感柔軟長(zhǎng)袖襯衫男
</span>
</div>
<div class="left w120 center">¥<span class="price">99.00</span></div>
<div class="left w120 center">
<button class="small-button">-</button>
<input class="center count" type="text" size="2" value="1">
<button class="small-button">+</button>
</div>
<div class="left w120 center">¥<span>99.00</span></div>
<div class="left w120 center">
<a href="javascript:void(0);">刪除</a>
</div>
</div>
</div>
<div id="cart-footer">
<div class="clear left">
<a id="clearSelected" href="javascript:void(0);">刪除選中商品</a>
</div>
<div class="right">
<span>總共選中了<span id="totalCount">0</span>件商品</span>
<span>總計(jì): <span id="totalPrice">¥0.00</span></span>
<button id="pay" class="big-button">去結(jié)算</button>
</div>
</div>
</div>
</body>
JS 代碼：
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script>
$(function(){
//初始化
$("#cart-items input[name='selectOne']").each(function(){
var price=$(this).parent().parent().children()[5].children[0].textContent;
var count=$(this).parent().parent().children()[4].children[1].value;
$(this).attr({"totalPrice":price,"count":count});
});
showInfo();
// 打印商品總計(jì)和總價(jià)
function showInfo(){
var totalCount=0;
var totalPrice=0;
var selectOnelist=$("#cart-items input[name='selectOne']");
if(selectOnelist.length==0){
$("#totalCount").text("0");
$("#totalPrice").text("￥"+"0.00");
}
for (i=0;i<selectOnelist.length;i+=1){
var price=$(selectOnelist[i]).attr("totalPrice");
var count=$(selectOnelist[i]).attr("count");
if (selectOnelist[i].checked){
totalCount+=parseFloat(count);
totalPrice+=parseFloat(price);
}
$("#totalCount").text(totalCount);
$("#totalPrice").text("￥"+totalPrice.toFixed(2));
}
}
// 全選按鈕
$("#selectAll").on("click",function(){
if($("#selectAll").get(0).checked){
$("input[name='selectOne']").each(function(){
this.checked=true;
});
}
else{
$("input[name='selectOne']").each(function(){
this.checked=false;
});
}
showInfo();
})
// 數(shù)量減少按鈕
$("#cart-items button.small-button:even").on("click",function(evt){
var num=parseInt($(evt.target).next().val());
if(num==0){
$(evt.target).next().val(num);
}
else{
$(evt.target).next().val(num-1);
}
// 計(jì)算小計(jì)
var centerPrice=$(evt.target).parent().next().children();
var centerNum=$(evt.target).next().val();
var singlePrice=$(evt.target).parent().prev().children(".price").text();
centerPrice.text((parseFloat(singlePrice)*centerNum).toFixed(2));
// 改變selectOne的屬性
var selectOne=$(evt.target).parent().parent().children()[0].children;
$(selectOne).attr({"totalPrice":centerPrice.text(),"count":$(evt.target).next().val()});
// 修改顯示
showInfo();
})
// 數(shù)量增加按鈕
$("#cart-items button.small-button:odd").on("click",function(evt){
var num=parseInt($(evt.target).prev().val());
if(num==200){
$(evt.target).prev().val(num);
}
else{
$(evt.target).prev().val(num+1);
}
// 計(jì)算小計(jì)
var centerPrice=$(evt.target).parent().next().children();
var centerNum=$(evt.target).prev().val();
var singlePrice=$(evt.target).parent().prev().children(".price").text();
centerPrice.text((parseFloat(singlePrice)*centerNum).toFixed(2));
// 改變selectOne的屬性
var selectOne=$(evt.target).parent().parent().children()[0].children;
$(selectOne).attr({"totalPrice":centerPrice.text(),"count":$(evt.target).prev().val()});
//修改顯示
showInfo();
})
// 復(fù)選框
$("#cart-items input[name='selectOne']").on("click",function(evt){
showInfo();
})
// 刪除按鈕
$("#cart-items a").on("click",function(evt){
var confirm=window.confirm("are you sure?");
if (confirm){
$(evt.target).parent().parent().remove();
}
showInfo();
})
// 刪除選中按鈕
$("a[id='clearSelected']").on("click",function(){
var confirm=window.confirm("are you sure?");
if (confirm){
$("#cart-items input[name='selectOne']").each(function(){
if($(this).get(0).checked){
$(this).parent().parent().remove();
}
});
}
showInfo();
})
});
</script>
效果：
1.png
2.png
3.png
4.png
5.png
6.png
