模仿淘寶購物車的全選全不選,根據選中的商品計算價格,指定店鋪選擇。以下是我自己在做H5頁面的時候整理出來的,想我一個純php的來寫成這樣也不容易。不完善的地方歡迎各位小伙伴指出~
讓客戶滿意是我們工作的目標,不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴,公司提供的服務項目有:申請域名、虛擬空間、營銷軟件、網站建設、措美網站維護、網站推廣。效果圖:
html代碼:
購物車
編輯 完成amazon.co.jp-CHANGE8
免官網運費amazon.co.jp-CHANGE8
免官網運費全選合計:0.00 不含運費、優惠券
js代碼部分:
1.全選很簡單,根據全選checkbox的選中狀態來控制其它checkbox就行。if語句里是我控制結算按鈕的css的。可不用理會。
2.計算價格同理,給所有的checkbox添加一個class,把價格通過自定義標簽寫在checkbox元素上,當點擊任意class名為sumprice的時候就觸發點擊事件,循環所有checkbox,然后獲取價格為真的值,累計相加。
3.全選某個店鋪,sel_quan(obj)方法,給店鋪的checkbox定義一個唯一class,子checkbox也加上這個唯一class,當選中店鋪checkbox的時候,就把帶有這個標識的產品checkbox都選中。
以上代碼還沒有很完善,比如當checkbox沒有全部選中的時候,全選按鈕狀態取消,店鋪產品沒有全部選中的時候,狀態取消等等,我就懶的弄了。
樣式我就不貼了,畢竟js是最重要的,只要把需要的class名放在你要的標簽上就行了
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。