jquery简单购物车功能
分类：实例代码
本例中的购物车功能当然不能直接实际用用，主要目的还是学习jquery的相关应用。
比如只有选中产品以后，才能够调整商品的数量，同时也能够实时计算放入购物车的商品总数量。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
.cfs {
width: 30%;
}
.cfs a {
cursor: pointer;
}
#cxsdd {
width: 800px;
text-align: center;
}
#cxsdd td {
height: 35px;
}
#xianss {
height: 40px;
line-height: 40px;
}
#in_num, #sp_num {
color: red;
font-weight: bold;
font-size: 20px;
padding: 0 5px;
}
.lskdo {
width: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="xianss">您选择了<span id="in_num">0</span>种商品，共有<span id="sp_num">0</span>个商品</div>
<table id="cxsdd" width="200" border="1" cellpadding="0" cellspacing="0">
<tr>
<td>店铺序列</td>
<td>店铺名称</td>
<td>商品</td>
<td><input id="allc" type="checkbox" />全选</td>
<td class="cfs">数量</td>
</tr>
<tr>
<td rowspan="5">前端教程网</td>
<td rowspan="5">pipipi.net</td>
<td>产品1</td>
<td><input class="choo" type="checkbox" value="choose" />选择</td>
<td class="cfs">
<a class="jian">-</a>
<input class="lskdo" disabled="disabled" type="text" value="0" />
<a class="jia">+</a>
</td>
</tr>
<tr>
<td>产品2</td>
<td><input class="choo" type="checkbox" value="choose" />选择</td>
<td class="cfs">
<a class="jian">-</a>
<input class="lskdo" disabled="disabled" type="text" value="0" />
<a class="jia">+</a>
</td>
</tr>
<tr>
<td>产品3</td>
<td><input class="choo" type="checkbox" value="choose" />选择</td>
<td class="cfs">
<a class="jian">-</a>
<input class="lskdo" disabled="disabled" type="text" value="0" />
<a class="jia">+</a>
</td>
</tr>
<tr>
<td>产品4</td>
<td><input class="choo" type="checkbox" value="choose" />选择</td>
<td class="cfs">
<a class="jian">-</a>
<input class="lskdo" disabled="disabled" type="text" value="0" />
<a class="jia">+</a>
</td>
</tr>
<tr>
<td>产品5</td>
<td><input class="choo" type="checkbox" value="choose" />选择</td>
<td class="cfs">
<a class="jian">-</a>
<input class="lskdo" disabled="disabled" type="text" value="0" />
<a class="jia">+</a>
</td>
</tr>
</table>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$("#allc").change(function() {
var innum = $(".choo").length;
if ($(this).prop("checked")) {
$(".choo").prop("checked", true);
$("#in_num").text(innum);
$(".lskdo").val(1);
$("#sp_num").text(innum);
$(".lskdo").prop("disabled", false);
} else {
$(".choo").prop("checked", false);
$("#in_num").text(0);
$(".lskdo").val(0);
$("#sp_num").text(0);
$(".lskdo").prop("disabled", true);
}
})
$(".choo").change(function() {
var lskd = $(".choo:checked").length;
$("#in_num").text(lskd);
var lsoe = $(this).parent().parent().find(".lskdo");
if ($(this).prop("checked")) {
lsoe.prop("disabled", false);
lsoe.val(1);
$("#sp_num").text(parseInt($("#sp_num").text()) + parseInt(lsoe.val()));
} else {
lsoe.prop("disabled", true);
$("#sp_num").text(parseInt($("#sp_num").text()) - parseInt(lsoe.val()));
lsoe.val(0);
}
})
$(".jian").click(function() {
var lskdpd = $(this).parent().parent().find(".choo");
var lsoek = $(this).parent().find(".lskdo");
if (lskdpd.prop("checked") && lsoek.val() > 1) {
var lskoe = parseInt(lsoek.val());
var eiow = parseInt($("#sp_num").text());
lsoek.val(lskoe - 1);
$("#sp_num").text(eiow - 1);
} else {}
})
$(".jia").click(function(iiii) {
var lskdpd = $(this).parent().parent().find(".choo");
var lsoek = $(this).parent().find(".lskdo");
if (lskdpd.prop("checked")) {
var lskoe = parseInt(lsoek.val());
var eiow = parseInt($("#sp_num").text());
lsoek.val(lskoe + 1);
$("#sp_num").text(eiow + 1);
} else {}
})
// })
$(".lskdo").on('input propertychange', function() {
var deox = $(this).val();
if (isNaN(deox)) {
alert("您好,请输入您想购买的数量!");
$(this).val(1);
}
var loel = 0;
for (i = 0; i < $(".lskdo").length; i++) {
loel = parseInt(loel) + parseInt($(".lskdo").eq(i).val());
}
$("#sp_num").text(loel);
})
</script>
</body>
</html>
jquery简单购物车功能，这样的场景在实际项目中还是用的比较多的，关于jquery简单购物车功能就介绍到这了。
jquery简单购物车功能属于前端实例代码，有关更多实例代码大家可以查看。