真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

js/jQuery購物車全選反選、商品價格統(tǒng)計-創(chuàng)新互聯(lián)

模仿淘寶購物車的全選全不選,根據(jù)選中的商品計算價格,指定店鋪選擇。以下是我自己在做H5頁面的時候整理出來的,想我一個純php的來寫成這樣也不容易。不完善的地方歡迎各位小伙伴指出~

讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:申請域名、虛擬空間、營銷軟件、網(wǎng)站建設、措美網(wǎng)站維護、網(wǎng)站推廣。

效果圖:

js/jQuery購物車全選反選、商品價格統(tǒng)計

html代碼:



    
        
	購物車
	編輯
	完成
    
    
	
	    移入收藏夾
            刪除
        
                                      amazon.co.jp-CHANGE8                 免官網(wǎng)運費                              
                                                                   
                                     花王Merries紙尿褲 腰貼士M(6!11kg)瞬爽透氣168片(42片x4)紙尿褲紙尿褲                                              JRB 3,680                     

                                                                                                                                                        花王Merries紙尿褲 腰貼士M(6!11kg)瞬爽透氣168片(42片x4)紙尿褲紙尿褲                                              JRB 3,680                     

                                                                                                                                                        花王Merries紙尿褲 腰貼士M(6!11kg)瞬爽透氣168片(42片x4)紙尿褲紙尿褲                                              JRB 3,680                     

                                                                                              amazon.co.jp-CHANGE8                 免官網(wǎng)運費                                                                                                                                        花王Merries紙尿褲 腰貼士M(6!11kg)瞬爽透氣168片(42片x4)紙尿褲紙尿褲                                              JRB 3,680                     

                                                                                                                                                        花王Merries紙尿褲 腰貼士M(6!11kg)瞬爽透氣168片(42片x4)紙尿褲紙尿褲                                              JRB 3,680                     

                                                                                              全選                                                            合計:0.00                 不含運費、優(yōu)惠券                          去結算(0)              

js代碼部分:

1.全選很簡單,根據(jù)全選checkbox的選中狀態(tài)來控制其它checkbox就行。if語句里是我控制結算按鈕的css的??刹挥美頃?。

2.計算價格同理,給所有的checkbox添加一個class,把價格通過自定義標簽寫在checkbox元素上,當點擊任意class名為sumprice的時候就觸發(fā)點擊事件,循環(huán)所有checkbox,然后獲取價格為真的值,累計相加。

3.全選某個店鋪,sel_quan(obj)方法,給店鋪的checkbox定義一個唯一class,子checkbox也加上這個唯一class,當選中店鋪checkbox的時候,就把帶有這個標識的產(chǎn)品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沒有全部選中的時候,全選按鈕狀態(tài)取消,店鋪產(chǎn)品沒有全部選中的時候,狀態(tài)取消等等,我就懶的弄了。

樣式我就不貼了,畢竟js是最重要的,只要把需要的class名放在你要的標簽上就行了

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。


文章標題:js/jQuery購物車全選反選、商品價格統(tǒng)計-創(chuàng)新互聯(lián)
地址分享:http://weahome.cn/article/cssgio.html

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部