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

模仿淘宝购物车的全选全不选,根据选中的商品计算价格,指定店铺选择。以下是我自己在做H5页面的时候整理出来的,想我一个纯php的来写成这样也不容易。不完善的地方欢迎各位小伙伴指出~

html代码:

<body>
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">购物车</h1>
	<span class="mui-bedit mui-pull-right" id="cartEdit">编辑</span>
	<span class="mui-bedit mui-pull-right" id="cartFinish" style="display:none;">完成</span>
    </header>
    <div class="purform-content cartlist-content">
	<div class="cartlist-adddelete" style="display: none;" id="cartDelete">
	    <a href="" class="add-collect adddelete-item">移入收藏夹</a>
            <a href="" class="add-delete adddelete-item">删除</a>
        </div>
        <div class="cartlist-tab">
            <div class="ctab-seller mui-checkbox">
                <h3 class="ctab-title">amazon.co.jp-CHANGE8</h3>
                <span class="ctab-memo">免官网运费</span>
                <input type="checkbox" name="cate" class="seller_1 father_amazon sumprice sumfather" onclick="sel_quan('amazon')" style="left: 3%;margin-top: 6px;">
            </div>
            <div class="ctab-goodslist mui-checkbox">
                <div class="cartlist-cimgs ctab-cimgs">
                    <a href="" class="cimgs-a"><img src="/Public/images/web_new/cartimg.jpg"></a>
                </div>
                <div class="cartlist-ctitle ctab-ctitle">
                    <a class="ctitle-a">花王Merries纸尿裤 腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a>
                    <p class="ctitle-priceedit">
                        <span class="ctitle-price">JRB <em class="goodsprice">3,680</em></span>
                    </p>
                </div>
                <input type="checkbox" name="cate" data-price="3680" class="sumprice check_1 zimulu_amazon" style="left: 3%;margin-top: 45px;">
            </div>
            <div class="ctab-goodslist mui-checkbox">
                <div class="cartlist-cimgs ctab-cimgs">
                    <a href="" class="cimgs-a"><img src="/Public/images/web_new/cartimg.jpg"></a>
                </div>
                <div class="cartlist-ctitle ctab-ctitle">
                    <a class="ctitle-a">花王Merries纸尿裤 腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a>
                    <p class="ctitle-priceedit">
                        <span class="ctitle-price">JRB <em class="goodsprice">3,680</em></span>
                    </p>
                </div>
                <input type="checkbox" name="cate" data-price="3680" class="sumprice check_1 zimulu_amazon" style="left: 3%;margin-top: 45px;">
            </div>
            <div class="ctab-goodslist mui-checkbox">
                <div class="cartlist-cimgs ctab-cimgs">
                    <a href="" class="cimgs-a"><img src="/Public/images/web_new/cartimg.jpg"></a>
                </div>
                <div class="cartlist-ctitle ctab-ctitle">
                    <a class="ctitle-a">花王Merries纸尿裤 腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a>
                    <p class="ctitle-priceedit">
                        <span class="ctitle-price">JRB <em class="goodsprice">3,680</em></span>
                    </p>
                </div>
                <input type="checkbox" name="cate" data-price="3680" class="sumprice check_1 zimulu_amazon" style="left: 3%;margin-top: 45px;">
            </div>
        </div>
        <div class="cartlist-tab">
            <div class="ctab-seller mui-checkbox">
                <h3 class="ctab-title">amazon.co.jp-CHANGE8</h3>
                <span class="ctab-memo">免官网运费</span>
                <input type="checkbox" name="cate" class="seller_2 father_merries sumprice sumfather" onclick="sel_quan('merries')" style="left: 3%;margin-top: 6px;">
            </div>
            <div class="ctab-goodslist mui-checkbox">
                <div class="cartlist-cimgs ctab-cimgs">
                    <a href="" class="cimgs-a"><img src="/Public/images/web_new/cartimg.jpg"></a>
                </div>
                <div class="cartlist-ctitle ctab-ctitle">
                    <a class="ctitle-a">花王Merries纸尿裤 腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a>
                    <p class="ctitle-priceedit">
                        <span class="ctitle-price">JRB <em class="goodsprice">3,680</em></span>
                    </p>
                </div>
                <input type="checkbox" name="cate" data-price="3680" class="check_2 sumprice zimulu_merries" style="left: 3%;margin-top: 45px;">
            </div>
            <div class="ctab-goodslist mui-checkbox">
                <div class="cartlist-cimgs ctab-cimgs">
                    <a href="" class="cimgs-a"><img src="/Public/images/web_new/cartimg.jpg"></a>
                </div>
                <div class="cartlist-ctitle ctab-ctitle">
                    <a class="ctitle-a">花王Merries纸尿裤 腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a>
                    <p class="ctitle-priceedit">
                        <span class="ctitle-price">JRB <em class="goodsprice">3,680</em></span>
                    </p>
                </div>
                <input type="checkbox" name="cate" data-price="3680" class="check_2 sumprice zimulu_merries" style="left: 3%;margin-top: 45px;">
            </div>
        </div>

        <div class="purform-button">
            <div class="cartlist-allcheck mui-checkbox clearfloat">
                <span class="allcheck-check">全选</span>
                <input type="checkbox" name="cate" class="all_check sumprice chooseall" style="left:0;margin-top: 6px;">
            </div>
            <div class="cartlist-totalprice">
                <span class="ctotal-price">合计:<em class="ctotal">0.00</em></span>
                <span class="ctotal-memo">不含运费、优惠券</span>
            </div>
            <button class="button-btn cart-btn cartnull">去结算(0)</button>
        </div>
    </div>
</body>

js代码部分:

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

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

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

<script type="text/javascript">
		$(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"));
		}
	</script>

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

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

原文地址:http://blog.51cto.com/8759940/2096801

时间: 2024-10-03 10:44:27

js购物车全选反选、商品价格统计的相关文章

js实现全选反选

在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="theadInp" /> </th> <th>快递</th> <th>

js实现全选,反选,全不选

思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设为true选中状态. js代码 <script> window.onload=function(){ var CheckAll=document.getElementB

js 实现全选反选

最近在做一个js特效:全选,反选. 效果能实现,可是只执行了一次.多次点击,发现效果不能触发了.后来查了些文档,才了解是  attr  跟 prop 的区别! 代码直接贴出来: ($("#全选ID").attr("checked") 的返回值 就是  true/false )  attr只能运行一次:   function checked_all(){                            $("input[name='XXX']:chec

js制作全选 反选 不选

<!DOCTYPE html><html >    <head>        <meta charset="utf-8">        <title></title>    </head>    <style>        </style>        <script>    window.onload=function (){        var aBtn

js实现全选反选功能

开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); for(var i=0;i<arr.length;i++) { arr[i].checked=document.getElementById("all").checked; } } 出现问题如下: 1.getElementsByName开始被写成getElementByName,注意少

用js做出全选和反选效果

效果图如下: <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" language="javascript"> $(function(){  $("#selecAll").clic

全选反选取消-js代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS实现购物车全选多选按钮功能

对于JS初学者来说,一个完整的购物车实现还是挺难的,逻辑功能挺多.写出完整功能,能提升不少JS基础,下面实现购物车全选多选按钮功能: 首先HTML及CSS部分: <style> table { border-collapse: collapse; } td { border: 1px solid #000000; width: 100px; height: 30px; text-align: center; } </style> <body> <table>

elementUI+JS实现全选与反选

在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initia