近一直忙于公司的一个新的h5项目，项目中有一个购物车模块，使用jquery实现购物车基本结算功能。现已整理出来，感兴趣的小伙伴们可以参考一下。

基本实现了单选、全选、购物车数量联动、价格动态汇总、删除订单及无数据提示。

购物车列表模板

实际项目中需要根据购物车商品数据动态渲染，这里就使用静态html展示了。

<!-- 购物车列表 -->
<div class="cart-wrap__ls" id="J__CartLS">
	<div class="cart-ls__item">
		<!-- //复选框 -->
		<div class="cart-item__radio"><i class="ico-radio"></i></div>
		<!-- //商品信息 -->
		<div class="cart-item__ginfo">
			<img class="g-img" src="http://admin.weikeniu.com/img/28291/20170721151143_4752_b.jpg" />
			<div class="g-info">
				<div class="flex1">
					<div class="g-title clamp1">海陵岛大角湾风景区2天1晚</div>
					<div class="g-subtit clamp1">给你不一样的风景体验</div>
				</div>
				<div class="g-price c-red fs-32">￥<em>199.00</em></div>
			</div>
		</div>
		<!-- //数量加减 -->
		<div class="cart-item__num">
			<span class="minus disabled" onClick="$.cartNum.set(-1, this);">-</span>
			<input type="tel" value="1" onBlur="$.cartNum.check(this);" />
			<span class="plus normal" onClick="$.cartNum.set(+1, this);">+</span>
		</div>
		<!-- //删除 -->
		<img class="cart-item__del" src="img/icon_cart-del.png" />
	</div>
	<!-- ... -->
</div>

购物车底部固定模板

<!-- 购物车底部 -->
<div class="cart-wrap__bottomAction" style="padding-top:2rem;">
	<div class="bottomfixed">
		<div class="inner">
			<div class="chkAll flex1" id="J__chkAll">
				<i class="ico-radio"></i>
				<span>全选</span>
			</div>
			<div class="total rmr-24">合计：<span class="c-red fs-32">￥<em id="J__totalPrice">12232.00</em></span></div>
			<button class="gstyle-btn__primary btn-pay" id="J__goPay">结算 (<em id="J__selNum">12</em>)</button>
		</div>
	</div>
</div>

购物车数量

直接封装成$.cartNum函数，通过 $.cartNum.set() 、 $.cartNum.check(this) 调用即可。

<div class="cart-item__num">
	<span class="minus disabled" onClick="$.cartNum.set(-1, this);">-</span>
	<input type="tel" value="1" onBlur="$.cartNum.check(this);" />
	<span class="plus normal" onClick="$.cartNum.set(+1, this);">+</span>
</div>

$(function(){
	// 购物车数量
	$.cartNum={
		set: function(code, obj){
			var ipt=$(obj).siblings("input");
			var cartNums=parseInt($.trim(ipt.val()));
			switch (code) {
				case 1: {
					cartNums++;
				}
				break;
				case -1: {
					cartNums--;
				}
				break;
			}
			ipt.val(cartNums);
			$.cartNum.check(ipt);
			getTotalPrice();
		},
		check: function(obj){
			var o=$(obj);
			//数量小于0
			var cartNums=parseInt($.trim(o.val()));
			if (cartNums <=1) {
				o.val(1);
				o.siblings('.minus').addClass('disabled');
			}else {
				o.siblings('.minus').removeClass('disabled');
			}

			//判断数量是否是数字
			var regExp=/^[1-9]*[1-9][0-9]*$/;
			if (isNaN(cartNums) || !regExp.test($.trim(o.val()))) {
				o.val(1);
				o.siblings('.minus').addClass('disabled');
			}

			//数量大于库存（假定库存99）
			//var storeNums=parseInt($.trim($('#data_storeNums').text()));
			var storeNums=99;
			if (cartNums >=storeNums) {
				o.val(storeNums);
			}
			getTotalPrice();
		}
	};
});

绑定单选、全选

// 判断是否全选
chkAll();
function chkAll() {
	var $radio=$('#J__CartLS .cart-item__radio');
	var num=$radio.size();
	var k=0;
	$radio.each(function(i, v) {
		if($(this).hasClass('on')) {
			k++;
		}
	});
	if(k==num) {
		$('#J__chkAll').addClass('on');
	} else {
		$('#J__chkAll').removeClass('on');
	}
}
// 绑定单选
$('body').on('click', '#J__CartLS .cart-item__radio', function() {
	$(this).toggleClass('on');
	chkAll();
	getTotalPrice();
});
// 绑定全选
$('body').on('click', '#J__chkAll', function() {
	if($(this).hasClass('on')) {
		$('#J__CartLS .cart-item__radio').removeClass('on');
	} else {
		$('#J__CartLS .cart-item__radio').addClass('on');
	}
	$(this).toggleClass('on');
	getTotalPrice();
});

价格汇总

点击单选、全选及数量加减，都触发 getTotalPrice 函数。

// 价格汇总
getTotalPrice();
function getTotalPrice() {
	var $cartls=$('#J__CartLS').find('.cart-ls__item');
	var total=0, selected=0;
	$cartls.each(function(i, v) {
		if($(v).find('.cart-item__num input').val() > 1) {
			$(v).find('.cart-item__num .minus').removeClass('disabled'); //数量大于1减号可点击
		}
		if($(v).children('.cart-item__radio').hasClass('on')) {
			var num=$(v).find('.cart-item__num input').val(); //商品数量
			total +=parseFloat($(v).find('.g-price em').text() * num);
			selected++;
		}
	});
	$('#J__goPay').prop('disabled', selected < 1 ? true : false);
	$('#J__totalPrice').text(total.toFixed(2));
	$('#J__selNum').text(selected);
}

删除订单

删除订单后，移除该订单，触发 getTotalPrice 函数，当购物车为空，则提示无数据。

// 删除订单
$('#J__CartLS').on('click', '.cart-item__del', function() {
	var that=$(this);
	wcPop({
		skin: 'ios',
		style: 'border-radius:12px;font-family:arial;overflow:hidden;',
		content: '您确定要删除该条订单吗？',
		btns: [
			{
				text: '取消', style: 'color:#797979',
				onTap() { wcPop.close(); }
			},
			{
				text: '确定', style: 'color:#e0201f',
				onTap() {
					that.parents('.cart-ls__item').remove();
					wcPop.close();
					getTotalPrice();
					if($('#J__CartLS .cart-ls__item').size() > 0) {
						$('.J__bmBadge').text($('#J__CartLS .cart-ls__item').size());
					}else {
						$('.J__bmBadge').remove();
						$('.cart-nodata').fadeIn();
					}
				}
			}
		]
	})
});

ok，以上就是基于jquery实现的购物车功能。希望对大家有所帮助，感兴趣的可以参考一下。

如果大家有更优的方法，欢迎一起交流讨论哈~~

着电子商务网站和在线购物网站的日益普及，开发人员往往需要设计购物车功能。在本文中，我们将为大家展示一些免费并且流行的jQuery购物车插件，你可以下载它们来简化工作流程。

该插件非常智能，它能通过非入侵的方式使用户跳转到想要购买的产品列表中，无需刷新页面或触发弹出窗口。

jPayPalCart是一个简单的集成jQuery插件，它允许您创建一个无需使用笨重服务器端刷新页面的功能齐全的购物车。

Simple Cart是一个免费开源的JavaScript购物车，可以轻松地与网站集成。

AddUI Store是一个易于使用的jQuery插件，它可以在任何网站上快速增加一个功能齐全的商店。这个插件由纯JavaScript（jQuery）写成。

jQuery Cart能实现拖放功能，能更新购物车来反应添加到其中的新项目，同时会更新数量。

Ajax和jQuery shopping carts是实现网站购物车最好的方式之一。

AJAX PayPal Cart是一个易于使用的jQuery插件，Web开发人员可以使用它在网站上添加一个全功能的购物车。

Ajax Shopping Cart可以以Ajax的方式修改购物车里的商品数量。

本站文章除注明转载外，均为本站原创或翻译