js/jQuery购物车全选反选、商品价格统计

js代码部分：

1.全选很简单，根据全选checkbox的选中状态来控制其它checkbox就行。if语句里是我控制结算按钮的css的。可不用理会。

2.计算价格同理，给所有的checkbox添加一个class，把价格通过自定义标签写在checkbox元素上，当点击任意class名为sumprice的时候就触发点击事件，循环所有checkbox，然后获取价格为真的值，累计相加。

3.全选某个店铺，sel_quan(obj)方法，给店铺的checkbox定义一个唯一class，子checkbox也加上这个唯一class，当选中店铺checkbox的时候，就把带有这个标识的产品checkbox都选中。

		$(function(){

			$(".chooseall").click(function(){    
				var isChecked = $(this).prop("checked");
				if(isChecked==true){
					$('.cart-btn').removeClass('cartnull');
					$('.cart-btn').addClass('cartctrue');
				}else{
					$('.cart-btn').removeClass('cartctrue');
					$('.cart-btn').addClass('cartnull');
				}
				$("input[type='checkbox']").prop("checked", isChecked);

			});


			$('.sumprice').click(function(){
				var totalprice = 0;
				$('.sumprice').each(function(){
					
					if ($(this).is(":checked")) {
						var aaa = parseInt($(this).attr('data-price'));
						if(aaa){
							totalprice += aaa;
						}
					}

					if(totalprice==0){
						$('.cart-btn').removeClass('cartctrue');
						$('.cart-btn').addClass('cartnull');
					}else{
						$('.cart-btn').removeClass('cartnull');
						$('.cart-btn').addClass('cartctrue');
					}
					
					$('.ctotal').text(totalprice.toLocaleString());
				});
				
			});

		})

		var btn=document.getElementById('cartEdit'); 
		btn.addEventListener('click',function(){
			$('#cartDelete').fadeIn(1000);
			document.getElementById("cartEdit").style.display="none";
			document.getElementById("cartFinish").style.display="";
		},false);

		var btn2=document.getElementById('cartFinish'); 
		btn2.addEventListener('click',function(){
			$('#cartDelete').fadeOut(1000);
			$('#cartEdit').fadeIn(1000);
			document.getElementById("cartFinish").style.display="none";
		},false);

		function sel_quan(sellerid){
			$(".zimulu_"+sellerid).prop("checked",$(".father_"+sellerid).prop("checked"));	
		}
	

以上代码还没有很完善，比如当checkbox没有全部选中的时候，全选按钮状态取消，店铺产品没有全部选中的时候，状态取消等等，我就懒的弄了。

样式我就不贴了，毕竟js是最重要的，只要把需要的class名放在你要的标签上就行了

分享至：

   

关于我们

公司简介 发展历程

服务项目

高端网站建设 小程序开发 APP开发 网络营销

建站知识

网站建设 网站设计 网站制作 小程序

联系我们

公司地址 人才招聘

成都 重庆



电话：028-86922220



地址：成都市太升南路288号锦天国际A幢1002号



电话：028-86922220



地址：重庆市南岸区弹子石腾龙大道58号2栋21-6

版权所有：成都创新互联科技有限公司重庆分公司 渝ICP备2021005571号-4