在電商類項目中，購物車可以說是基本要求了。購物車的綜合功能能以及邏輯功能對學習階段的人來說都能或多或少的提升js知識，鍛煉論及能力。購物車中主要分為全選、店鋪、單選、價格幾大類。javascript實現購物車功能，每個人的編寫邏輯風格不同，在此使用以下布局方式。

其中全選的input放在div.all中單放，使用dl包裹一個店鋪中的所有商品，可以都多個dl包裹不同的店鋪。在每個dl中用dt包裹店鋪信息并放置一個input方便實現選中店鋪時勾選該店鋪內所有商品。之后用dd包裹當前商鋪下對應的商品，此處頁面并不完善只是加了價格以及一個選擇框來相對應實現單選效果使用。

關于效果的順序可以隨意，可以從點擊全選開始。首先使用jquery選中div.all中的input標簽添加一個change或者click事件都可以，也可以通過時間監聽on來添加。監聽當全選對應的input狀態發生更改時，讓所有input的狀態跟當前input的狀態一致。

每次更改狀態后都可以直接循環獲取所有選中dd中input所對應的商品價格相加。若是設置有商品個數需要用個數乘上相對應的商品價格再相加，設置給dt后對應的價格。在循環得到所有dt的價格相加設置給總價。

如果點擊是取消全選，也會同時計算店鋪后總價為0，從而計算商品總價為0。當點擊店鋪中對應的input時，需要設置當前店鋪下對應的所有商品狀態跟當前input狀態一致。想要獲取當前店鋪對應的商品可以根據this當前標簽選擇使用jquery篩選中對應的查找api來找到并設置。

設置狀態后需要根據當前店鋪下所有選擇商品的價格和來設置店鋪后對應的價格。再從新獲取所有店鋪后邊的價格計算和設置給總價格。此處計算所有店鋪對應的價格和這個效果在全選中也有使用可以選擇封裝調用。

同時會出現一個問題，若是選中所有店鋪后，全選的狀態并沒有改變。所有需要在點擊商鋪時同時判斷一下是否是素有店鋪都是選中狀態，如果是則需要設置全選input的狀態跟隨店鋪更改。

最后當單點需要設置給每一個商品所對應的input按鈕。當點擊單選按鈕時，需要獲取當前商品所對應的價格設置給店鋪后對應的那個價格。之前編寫的效果中有獲取每個店鋪下對應所有選中商品價格的和，可以選擇封裝多次調用。在設置店鋪價格更改時需要同時更改總價的值。上方代碼也有重復，可以封裝成函數多次分別調用。

點擊商品后若是使當前店鋪下所有商品選中，同時也需要操作店鋪后對應的input選中，如果不是所有都選中的話需要設置店鋪對應的不選中。

當然在更改了店鋪的狀態時就需要再此更改一下全選的選中狀態，調用一下已經封裝好的函數。至此購物車的基本效果已經成型。