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


效果图：


html代码：

<body><headerclass="mui-barmui-bar-nav"><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h2class="mui-title">购物车</h2><spanclass="mui-beditmui-pull-right"id="cartEdit">编辑</span><spanclass="mui-beditmui-pull-right"id="cartFinish"style="display:none;">完成</span></header><divclass="purform-contentcartlist-content"><divclass="cartlist-adddelete"style="display:none;"id="cartDelete"><ahref=""class="add-collectadddelete-item">移入收藏夹</a><ahref=""class="add-deleteadddelete-item">删除</a></div><divclass="cartlist-tab"><divclass="ctab-sellermui-checkbox"><h4class="ctab-title">amazon.co.jp-CHANGE8</h4><spanclass="ctab-memo">免官网运费</span><inputtype="checkbox"name="cate"class="seller_1father_amazonsumpricesumfather"onclick="sel_quan('amazon')"style="left:3%;margin-top:6px;"></div><divclass="ctab-goodslistmui-checkbox"><divclass="cartlist-cimgsctab-cimgs"><ahref=""class="cimgs-a"><imgsrc="/Public/images/web_new/cartimg.jpg"></a></div><divclass="cartlist-ctitlectab-ctitle"><aclass="ctitle-a">花王Merries纸尿裤腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a><pclass="ctitle-priceedit"><spanclass="ctitle-price">JRB<emclass="goodsprice">3,680</em></span></p></div><inputtype="checkbox"name="cate"data-price="3680"class="sumpricecheck_1zimulu_amazon"style="left:3%;margin-top:45px;"></div><divclass="ctab-goodslistmui-checkbox"><divclass="cartlist-cimgsctab-cimgs"><ahref=""class="cimgs-a"><imgsrc="/Public/images/web_new/cartimg.jpg"></a></div><divclass="cartlist-ctitlectab-ctitle"><aclass="ctitle-a">花王Merries纸尿裤腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a><pclass="ctitle-priceedit"><spanclass="ctitle-price">JRB<emclass="goodsprice">3,680</em></span></p></div><inputtype="checkbox"name="cate"data-price="3680"class="sumpricecheck_1zimulu_amazon"style="left:3%;margin-top:45px;"></div><divclass="ctab-goodslistmui-checkbox"><divclass="cartlist-cimgsctab-cimgs"><ahref=""class="cimgs-a"><imgsrc="/Public/images/web_new/cartimg.jpg"></a></div><divclass="cartlist-ctitlectab-ctitle"><aclass="ctitle-a">花王Merries纸尿裤腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a><pclass="ctitle-priceedit"><spanclass="ctitle-price">JRB<emclass="goodsprice">3,680</em></span></p></div><inputtype="checkbox"name="cate"data-price="3680"class="sumpricecheck_1zimulu_amazon"style="left:3%;margin-top:45px;"></div></div><divclass="cartlist-tab"><divclass="ctab-sellermui-checkbox"><h4class="ctab-title">amazon.co.jp-CHANGE8</h4><spanclass="ctab-memo">免官网运费</span><inputtype="checkbox"name="cate"class="seller_2father_merriessumpricesumfather"onclick="sel_quan('merries')"style="left:3%;margin-top:6px;"></div><divclass="ctab-goodslistmui-checkbox"><divclass="cartlist-cimgsctab-cimgs"><ahref=""class="cimgs-a"><imgsrc="/Public/images/web_new/cartimg.jpg"></a></div><divclass="cartlist-ctitlectab-ctitle"><aclass="ctitle-a">花王Merries纸尿裤腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a><pclass="ctitle-priceedit"><spanclass="ctitle-price">JRB<emclass="goodsprice">3,680</em></span></p></div><inputtype="checkbox"name="cate"data-price="3680"class="check_2sumpricezimulu_merries"style="left:3%;margin-top:45px;"></div><divclass="ctab-goodslistmui-checkbox"><divclass="cartlist-cimgsctab-cimgs"><ahref=""class="cimgs-a"><imgsrc="/Public/images/web_new/cartimg.jpg"></a></div><divclass="cartlist-ctitlectab-ctitle"><aclass="ctitle-a">花王Merries纸尿裤腰贴士M(6!11kg)瞬爽透气168片(42片x4)纸尿裤纸尿裤</a><pclass="ctitle-priceedit"><spanclass="ctitle-price">JRB<emclass="goodsprice">3,680</em></span></p></div><inputtype="checkbox"name="cate"data-price="3680"class="check_2sumpricezimulu_merries"style="left:3%;margin-top:45px;"></div></div><divclass="purform-button"><divclass="cartlist-allcheckmui-checkboxclearfloat"><spanclass="allcheck-check">全选</span><inputtype="checkbox"name="cate"class="all_checksumpricechooseall"style="left:0;margin-top:6px;"></div><divclass="cartlist-totalprice"><spanclass="ctotal-price">合计：<emclass="ctotal">0.00</em></span><spanclass="ctotal-memo">不含运费、优惠券</span></div><buttonclass="button-btncart-btncartnull">去结算(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都选中。

<scripttype="text/javascript">$(function(){$(".chooseall").click(function(){varisChecked=$(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(){vartotalprice=0;$('.sumprice').each(function(){if($(this).is(":checked")){varaaa=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());});});})varbtn=document.getElementById('cartEdit');btn.addEventListener('click',function(){$('#cartDelete').fadeIn(1000);document.getElementById("cartEdit").style.display="none";document.getElementById("cartFinish").style.display="";},false);varbtn2=document.getElementById('cartFinish');btn2.addEventListener('click',function(){$('#cartDelete').fadeOut(1000);$('#cartEdit').fadeIn(1000);document.getElementById("cartFinish").style.display="none";},false);functionsel_quan(sellerid){$(".zimulu_"+sellerid).prop("checked",$(".father_"+sellerid).prop("checked"));}</script>


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

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