每天记录自己在学校学到的点点滴滴，让每天的生活过的更加充实！加油！
注：本次案例简单实现购物选择的功能！
实现效果：添加部分产品，左边为勾选框，右边为商品和数量选择，数量可以增加或减少，只有复选框勾选的时候，添加产品才可以显示所需金额，下方为商品总价格！
html代码：
<table id="tb1"> ???????????<tr> ???????????????<td>勾选状态</td> ???????????????<td>商品名称</td> ???????????????<td>商品价格</td> ???????????????<td>数量</td> ???????????</tr> ???????????<tr> ???????????????<td> ???????????????????<input type="checkbox" class="a" /></td> ???????????????<td>空调</td> ???????????????<td class="auto-style1">2400</td> ???????????????<td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> ???????????</tr> ???????????<tr> ???????????????<td> ???????????????????<input type="checkbox" class="a" /></td> ???????????????<td>长虹电视</td> ???????????????<td class="auto-style1">2600</td> ???????????????<td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> ???????????</tr> ???????????<tr> ???????????????<td> ???????????????????<input type="checkbox" class="a" /></td> ???????????????<td>小米3</td> ???????????????<td class="auto-style1">2200</td> ???????????????<td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> ???????????</tr> ???????????<tr> ???????????????<td> ???????????????????<input type="checkbox" class="a" /></td> ???????????????<td>BlurAir空气净化器</td> ???????????????<td class="auto-style1">5000</td> ???????????????<td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> ???????????</tr> ???????????<tr> ???????????????<td> ???????????????????<input type="checkbox" class="a" /></td> ???????????????<td>三星显示器</td> ???????????????<td class="auto-style1">2000</td> ???????????????<td><span class="sum">+</span><input type="text" value="0" /><span class="min">-</span></td> ???????????</tr> ???????</table> ??????? <h3>总价格:<span id="spNumber"></span></h3>
Jquery代码：
<script type="text/javascript"> ???????????$(document).ready(function () { ???????????????$(".sum").click(function () { ???添加产品数量 ???????????????????var tdlist = $(this).next("input").val(); ??获取文本框数量值 ???????????????????var number = parseInt(tdlist) + 1; ?加一 ???????????????????var sum = 0; ???????????????????$(this).next("input").val(number); ???????????????????getSum(); ???????????????}); ???????????????$(".min").click(function () { ??减少产品数量 ???????????????????var tdlist = $(this).prev("input").val(); ???????????????????if (tdlist > 0) { ??数量不能为负 ???????????????????????var number = parseInt(tdlist) - 1; ?减一 ???????????????????????$(this).prev("input").val(number); ???????????????????????getSum(); ???????????????????} ???????????????}); ???????????????$(".a").click(function () { ???????????????????getSum(); ???????????????}) ???????????????function getSum() { ??获取产品总金额 ???????????????????var trlist = $("#tb1").find("tr:gt(0)"); ???????????????????var sum = 0; ???????????????????trlist.each(function () { ???????????????????????var check = $(this).find("input[type=‘checkbox‘]").prop("checked"); ?勾选框为true ???????????????????????if (check == true) { ???????????????????????????var monery = $(this).find(".auto-style1").text(); 获得商品单价 ???????????????????????????var number = $(this).find("input:text").val(); ???选择商品数量 ???????????????????????????var s = parseInt(monery) * parseInt(number); ?相乘 ???????????????????????????sum += s; ???????????????????????} ???????????????????????$("#spNumber").text(sum); ?赋值 ???????????????????}); ???????????????} ???????????}); ???</script>代码到这里就结束啦！后边还会再加一些功能！再接再厉！
jQuery复习 简单实现购物车功能
原文地址：https://www.cnblogs.com/dcy521/p/10259419.html