js/jQuery購(gòu)物車(chē)全選反選、商品價(jià)格統(tǒng)計(jì)
模仿淘寶購(gòu)物車(chē)的全選全不選，根據(jù)選中的商品計(jì)算價(jià)格，指定店鋪選擇。以下是我自己在做H5頁(yè)面的時(shí)候整理出來(lái)的，想我一個(gè)純php的來(lái)寫(xiě)成這樣也不容易。不完善的地方歡迎各位小伙伴指出~
成都網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序開(kāi)發(fā)、集團(tuán)成都定制網(wǎng)頁(yè)設(shè)計(jì)等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類(lèi)型包括：發(fā)電機(jī)回收等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致稱譽(yù)！
效果圖：
html代碼：
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h2 class="mui-title">購(gòu)物車(chē)</h2>
<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">
<h4 class="ctab-title">amazon.co.jp-CHANGE8</h4>
<span class="ctab-memo">免官網(wǎng)運(yùn)費(fèi)</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">
<h4 class="ctab-title">amazon.co.jp-CHANGE8</h4>
<span class="ctab-memo">免官網(wǎng)運(yùn)費(fèi)</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">合計(jì)：<em class="ctotal">0.00</em></span>
<span class="ctotal-memo">不含運(yùn)費(fèi)、優(yōu)惠券</span>
</div>
<button class="button-btn cart-btn cartnull">去結(jié)算(0)</button>
</div>
</div>
</body>js代碼部分：
1.全選很簡(jiǎn)單，根據(jù)全選checkbox的選中狀態(tài)來(lái)控制其它c(diǎn)heckbox就行。if語(yǔ)句里是我控制結(jié)算按鈕的css的。可不用理會(huì)。
2.計(jì)算價(jià)格同理，給所有的checkbox添加一個(gè)class，把價(jià)格通過(guò)自定義標(biāo)簽寫(xiě)在checkbox元素上，當(dāng)點(diǎn)擊任意class名為sumprice的時(shí)候就觸發(fā)點(diǎn)擊事件，循環(huán)所有checkbox，然后獲取價(jià)格為真的值，累計(jì)相加。
3.全選某個(gè)店鋪，sel_quan(obj)方法，給店鋪的checkbox定義一個(gè)唯一class，子checkbox也加上這個(gè)唯一class，當(dāng)選中店鋪checkbox的時(shí)候，就把帶有這個(gè)標(biāo)識(shí)的產(chǎn)品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>以上代碼還沒(méi)有很完善，比如當(dāng)checkbox沒(méi)有全部選中的時(shí)候，全選按鈕狀態(tài)取消，店鋪產(chǎn)品沒(méi)有全部選中的時(shí)候，狀態(tài)取消等等，我就懶的弄了。
樣式我就不貼了，畢竟js是最重要的，只要把需要的class名放在你要的標(biāo)簽上就行了
網(wǎng)站欄目：js/jQuery購(gòu)物車(chē)全選反選、商品價(jià)格統(tǒng)計(jì)
URL網(wǎng)址：http://www.rwnh.cn/article14/ipcpde.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷(xiāo)推廣、Google、靜態(tài)網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)站營(yíng)銷(xiāo)、網(wǎng)站建設(shè)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
- 企業(yè)適不適合租用云服務(wù)器？這七個(gè)方面告訴你 2022-10-13
- 學(xué)習(xí)了解什么是云服務(wù)器ECS 2021-02-22
- 網(wǎng)站云服務(wù)器是怎么回事？ 2016-11-12
- 云服務(wù)器是什么？怎么買(mǎi)云服務(wù)器？ 2022-10-07
- 云服務(wù)器的機(jī)房怎么判斷好壞？ 2022-10-06
- 對(duì)于企業(yè)來(lái)說(shuō)，使用云服務(wù)器的好處有哪些？ 2021-02-16
- 空間，輕云服務(wù)器，云主機(jī)三者的區(qū)別 2021-05-09
- 云服務(wù)器租用都需要注意什么？如何選擇好的云服務(wù)器商？ 2022-10-11
- 直播平臺(tái)都用什么云服務(wù)器 2022-10-08
- 云服務(wù)器的應(yīng)用優(yōu)勢(shì)分析，你知道有哪些優(yōu)勢(shì)嗎？ 2021-03-01
- 高防云服務(wù)器可以防護(hù)哪些攻擊? 2021-02-21
- 企業(yè)做網(wǎng)站應(yīng)該選擇虛擬主機(jī)還是云服務(wù)器？ 2021-12-31