jquery模拟购物车多选结算页面效果
1、新建html文档。
2、书写hmtl代码。
<div class="gwc" style=" margin:auto;">
<table cellpadding="0" cellspacing="0" class="gwc_tb1">
<tr>
<td class="tb1_td1"><input id="Checkbox1" type="checkbox" class="allselect"/></td>
<td class="tb1_td1">全选</td>
<td class="tb1_td3">商品</td>
<td class="tb1_td4">商品信息</td>
<td class="tb1_td5">数量</td>
<td class="tb1_td6">单价</td>
<td class="tb1_td7">操作</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb2">
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-1" /></td>
<td class="tb2_td2"><a href="#"><img src="images/img1.jpg"/></a></td>
<td class="tb2_td3"><a href="#">产品标题</a></td>
<td class="tb1_td4">一件</td>
<td class="tb1_td5"><input id="min1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box1" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
<input id="add1" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total1" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">删除</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb2">
<tr>
<td class="tb2_td1"><input type="checkbox" value="1" name="newslist" id="newslist-2" /></td>
<td class="tb2_td2"><a href="#"><img src="images/img2.jpg"/></a></td>
<td class="tb2_td3"><a href="#">产品标题</a></td>
<td class="tb1_td4">一件</td>
<td class="tb1_td5"><input id="min2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
<input id="text_box2" name="" type="text" value="1" style=" width:30px; text-align:center; border:1px solid #ccc;" />
<input id="add2" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
</td>
<td class="tb1_td6"><label id="total2" class="tot" style="color:#ff5500;font-size:14px; font-weight:bold;"></label></td>
<td class="tb1_td7"><a href="#">删除</a></td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="gwc_tb3">
<tr>
<td class="tb1_td1"><input id="checkAll" class="allselect" type="checkbox" /></td>
<td class="tb1_td1">全选</td>
<td class="tb3_td1"><input id="invert" type="checkbox" />
反选
<input id="cancel" type="checkbox" />
取消 </td>
<td class="tb3_td2">已选商品
<label id="shuliang" style="color:#ff5500;font-size:14px; font-weight:bold;">0</label>
件</td>
<td class="tb3_td3">合计(不含运费):<span>￥</span><span style=" color:#ff5500;">
<label id="zong1" style="color:#ff5500;font-size:14px; font-weight:bold;"></label>
</span></td>
<td class="tb3_td4"><span id="jz1">结算</span><a href="#" style=" display:none;" class="jz2" id="jz2">结算</a></td>
</tr>
</table>
</div>
3、书写css代码。
* { margin: 0px; padding: 0px; border: 0px; font-size: 12px; color: #333; font-family: 微软雅黑; }
ul li { list-style: none }
a { text-decoration: none; }
a:hover { color: #e46432; }
body { margin: auto; overflow-x: hidden; }
.gwc { width: 950px; overflow: hidden; }
.gwc_tb1 { width: 100%; border-top: 5px solid #48b9e5; background: #d0e7fa; height: 38px; margin-top: 20px; overflow: hidden; }
.tb1_td1 { width: 35px; text-align: center; }
.tb1_td3 { width: 290px; text-align: center; background: url(../images/td1.jpg) right no-repeat; }
.tb1_td4 { width: 260px; text-align: center; background: url(../images/td1.jpg) right no-repeat; }
.tb1_td5 { width: 115px; text-align: center; background: url(../images/td1.jpg) right no-repeat; }
.tb1_td6 { width: 135px; text-align: center; background: url(../images/td1.jpg) right no-repeat; }
.tb1_td7 { text-align: center; }
.gwc_tb2 { width: 100%; margin-top: 20px; background: #eef6ff; border: 1px solid #e5e5e5; padding-top: 20px; padding-bottom: 20px; }
.tb2_td1 { width: 60px; text-align: center; }
.tb2_td2 { width: 100px; text-align: center; }
.tb2_td2 img { width: 96px; height: 96px; border: 2px solid #c9c6c7; }
.tb2_td3 { width: 170px; padding-left: 12px; padding-right: 18px; }
.tb2_td3 a { font-size: 14px; line-height: 22px; }
.gwc_tb3 { width: 100%; border: 1px solid #d2d2d2; background: #e7e7e7; height: 46px; margin-top: 20px; }
.gwc_tb3 tr td { font-size: 14px; }
.tb3_td2 { width: 100px; text-align: center; }
.tb3_td2 span { color: #ff5500; font-size: 14px; font-weight: bold; padding-left: 5px; padding-right: 5px; }
.tb3_td3 { width: 220px; text-align: center; }
.tb3_td3 span { font-size: 18px; font-weight: bold; }
.tb3_td4 { width: 110px; text-align: center; }
.jz2 { width: 100px; height: 46px; line-height: 46px; text-align: center; font-size: 18px; color: #fff; background: #ee0000; display: block; float: right; }
#jz1 { font-size: 18px; }
4、书写并添加js代码。
<script src="js/jquery.1.4.2-min.js"></script>
<script src="js/Calculation.js"></script>
<script>
$(document).ready(function () {
$(".allselect").click(function () {
$(".gwc_tb2 input[name=newslist]").each(function () {
$(this).attr("checked", true);
});
GetCount();
});
$("#invert").click(function () {
$(".gwc_tb2 input[name=newslist]").each(function () {
if ($(this).attr("checked")) {
$(this).attr("checked", false);
} else {
$(this).attr("checked", true);
}
});
GetCount();
});
$("#cancel").click(function () {
$(".gwc_tb2 input[name=newslist]").each(function () {
$(this).attr("checked", false);
});
GetCount();
});
$(".gwc_tb2 input[name=newslist]").click(function () {
if ($(this).attr("checked")) {
} else {
}
});
$(".gwc_tb2 input[name=newslist]").click(function () {
GetCount();
});
});
function GetCount() {
var conts = 0;
var aa = 0;
$(".gwc_tb2 input[name=newslist]").each(function () {
if ($(this).attr("checked")) {
for (var i = 0; i < $(this).length; i++) {
conts += parseInt($(this).val());
aa += 1;
}
}
});
$("#shuliang").text(aa);
$("#zong1").html((conts).toFixed(2));
$("#jz1").css("display", "none");
$("#jz2").css("display", "block");
}
</script>
5、代码整体结构。
6、查看效果。
