案例：購物車功能模塊

購物車頁面如下：

實現的主要功能有6點：

1. 全選功能

① 全選思路：里面3個小得復選框按鈕（j-checkbox）選中狀態（checked）跟着全選按鈕（checkall）走。

② 因為checked是復選框得固有屬性，此時需要利用prop()方法獲取和設置該屬性。

③ 把全選按鈕狀態賦值給3個小復選框就可以了。

④ 當我們每次點擊小得復選框按鈕，就來判斷：

⑤ 如果小復選框被選中的個數等於3，就應該把全選按鈕選上，否則全選按鈕不選。

⑥ :checked選擇器可以查找出被選中的表單元素。

2. 增減商品數量功能

① 核心思路：首先聲明一個變量，當點擊+號（increment），就讓這個值+1，然后賦值給文本框。

② 注意1：只能增加本商品的數量，就是當前+號的兄弟文本框itxt的值。

③ 修改表單的值是val()方法。

④ 注意2：這個變量初始值應該是這個文本框的值，在這個值得基礎上+1，要獲取表單的值。

⑤ 減號（decrement）思路同理，但是如果文本框得值是1，就不能再減了。

3. 修改商品小計功能

① 核心思路：每次點擊+號或者-號，根據文本框得值乘以當前商品的價格，就是商品的小計。

② 注意1：只能增加本商品的小計，就是當前商品的小計模塊（p-sum）。

③ 修改普通元素的內容是text()方法。

④ 注意2：當前商品的價格，要把￥符號去掉再相乘，截取字符串substr(1)。

⑤ parents('選擇器')可以返回指定祖先元素。

⑥ 最后計算的結果如果想要保留2位小數，通過toFixed(2)方法。

⑦ 用戶也可以直接修改表單里面的值，同樣要計算小計。用表單change時間。在商品數量的文本框中輸入一個數值，價格區也要有相應的變化。

⑧ 用最新的表單內的值乘以單價即可，但是還是當前商品小計。

4. 計算總計和總額

① 核心思路：把所有文本框里面的值相加就是總計數量，總額同理。

② 文本框里面的值不相同，如果想要相加需要用到each遍歷。聲明一個變量，相加即可。

③ 點擊+號-號，會改變總計和總額，如果用戶修改了文本框里面的值同樣會改變總計和總額。

④ 因此可以封裝一個函數求總計和總額的，以上2個操作調用這個函數即可。

⑤ 注意：總計是文本框里面的值，相加用val()，總額是普通元素的內容，用text()。

5. 刪除商品模塊

① 核心思路：把商品刪除remove()即可。

② 有三個地方需要刪除：（1）商品后面的刪除按鈕（2）刪除選中的商品（3）清理購物車

③ 商品后面的刪除按鈕：一定是刪除當前的商品，所以從$(this)出發。

④ 刪除選中的商品：先判斷小的復選框按鈕是否是選中狀態，如果是選中，則刪除對應的商品。

6. 給選中的商品添加背景功能

① 核心思路：選中的商品添加背景，不選中則移除背景。

② 全選按鈕點擊：如果全選是選中的，則給所有的商品添加背景，否則移除背景。

③ 小的復選框點擊：如果是選中狀態，則給當前商品添加背景，否則移除背景。

④ 這個背景，可以通過類名修改，添加類和刪除類。

    <!-- 頁面布局 -->
    <!-- 購物車模塊 start -->
    <div class="c-container">
        <div class="w">
            <div class="cart-filter-bar">
                <em>全部商品</em>
            </div>
            <!-- 購物車主要核心區域 -->
            <div class="cart-warp">
                <!-- 頭部全選模塊 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" name="" id="" class="checkall"> 全選
                    </div>
                    <div class="t-goods">商品</div>
                    <div class="t-price">單價</div>
                    <div class="t-num">數量</div>
                    <div class="t-sum">小計</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品詳細模塊 -->
                <div class="cart-item-list">
                    <div class="cart-item check-cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" checked class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p1.jpg" alt="">
                            </div>
                            <div class="p-msg">【5本26.8元】經典兒童文學彩圖青少版八十天環游地球中學生語文教學大綱</div>
                        </div>
                        <div class="p-price">￥12.60</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥12.60</div>
                        <div class="p-action"><a href="javascript:;">刪除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p2.jpg" alt="">
                            </div>
                            <div class="p-msg">【2000張貼紙】貼紙書 3-6歲 貼畫兒童 貼畫書全套12冊 貼畫 貼紙兒童 汽</div>
                        </div>
                        <div class="p-price">￥24.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥24.80</div>
                        <div class="p-action"><a href="javascript:;">刪除</a></div>
                    </div>
                    <div class="cart-item">
                        <div class="p-checkbox">
                            <input type="checkbox" name="" id="" class="j-checkbox">
                        </div>
                        <div class="p-goods">
                            <div class="p-img">
                                <img src="upload/p3.jpg" alt="">
                            </div>
                            <div class="p-msg">唐詩三百首+成語故事全2冊 一年級課外書 精裝注音兒童版 小學生二三年級課外閱讀書籍</div>
                        </div>
                        <div class="p-price">￥29.80</div>
                        <div class="p-num">
                            <div class="quantity-form">
                                <a href="javascript:;" class="decrement">-</a>
                                <input type="text" class="itxt" value="1">
                                <a href="javascript:;" class="increment">+</a>
                            </div>
                        </div>
                        <div class="p-sum">￥29.80</div>
                        <div class="p-action"><a href="javascript:;">刪除</a></div>
                    </div>
                </div>

                <!-- 結算模塊 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全選
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 刪除選中的商品</a>
                        <a href="javascript:;" class="clear-all">清理購物車</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已經選<em>1</em>件商品</div>
                        <div class="price-sum">總價： <em>￥12.60</em></div>
                        <div class="btn-area">去結算</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 購物車模塊 end -->

/* CSS樣式 */
/* 購物車模塊 */
.cart-filter-bar {
    font-size: 16px;
    color: #E2231A;
    font-weight: 700;
}
.cart-filter-bar em {
    padding: 5px;
    border-bottom: 1px solid #E2231A;
}
.cart-thead {
    height: 32px;
    line-height: 32px;
    margin: 5px 0 10px;
    padding: 5px 0;
    background: #f3f3f3;
    border: 1px solid #e9e9e9;
    border-top: 0;
    position: relative;
}
.cart-thead>div,
.cart-item>div {
    float: left;
}
.t-checkbox,
.p-checkbox {
    height: 18px;
    line-height: 18px;
    padding-top: 7px;
    width: 122px;
    padding-left: 11px;
}
.t-goods {
    width: 400px;
}
.t-price {
    width: 120px;
    padding-right: 40px;
    text-align: right;
}
.t-num {
    width: 150px;
    text-align: center;
}
.t-sum {
    width: 100px;
    text-align: right;
}
.t-action {
    width: 130px;
    text-align: right;
}
.cart-item {
    height: 160px;
    border-style: solid;
    border-width: 2px 1px 1px;
    border-color: #aaa #f1f1f1 #f1f1f1;
    background: #fff;
    padding-top: 14px;
    margin: 15px 0;
}
.check-cart-item {
    background: #fff4e8;
}
.p-checkbox {
    width: 50px;
}
.p-goods {
    margin-top: 8px;
    width: 565px;
}
.p-img {
    float: left;
    border: 1px solid #ccc;
    padding: 5px;
}
.p-msg {
    float: left;
    width: 210px;
    margin: 0 10px;
}
.p-price {
    width: 110px;
}
.quantity-form {
    width: 80px;
    height: 22px;
}
.p-num {
    width: 170px;
}
.decrement,
.increment {
    float: left;
    border: 1px solid #cacbcb;
    height: 18px;
    line-height: 18px;
    padding: 1px 0;
    width: 16px;
    text-align: center;
    color: #666;
    margin: 0;
    background: #fff;
    margin-left: -1px;
}
.itxt {
    float: left;
    border: 1px solid #cacbcb;
    width: 42px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    padding: 1px;
    margin: 0;
    margin-left: -1px;
    font-size: 12px;
    font-family: verdana;
    color: #333;
    -webkit-appearance: none;
}
.p-sum {
    font-weight: 700;
    width: 145px;
}

/* 結算模塊 */
.cart-floatbar {
    height: 50px;
    border: 1px solid #f0f0f0;
    background: #fff;
    position: relative;
    margin-bottom: 50px;
    line-height: 50px;
}
.select-all {
    float: left;
    height: 18px;
    line-height: 18px;
    padding: 16px 0 16px 9px;
    white-space: nowrap;
}
.select-all input {
    vertical-align: middle;
    display: inline-block;
    margin-right: 5px;
}
.operation {
    float: left;
    width: 200px;
    margin-left: 40px;
}
.clear-all {
    font-weight: 700;
    margin: 0 20px;
}
.toolbar-right {
    float: right;
}
.amount-sum {
    float: left;
}
.amount-sum em {
    font-weight: 700;
    color: #E2231A;
    padding: 0 3px;
}
.price-sum {
    float: left;
    margin: 0 15px;
}
.price-sum em {
    font-size: 16px;
    color: #E2231A;
    font-weight: 700;
}
.btn-area {
    font-weight: 700;
    width: 94px;
    height: 52px;
    line-height: 52px;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-family: "Microsoft YaHei";
    background: #e54346;
    overflow: hidden;
}

// JS邏輯代碼，注意在html頁面引入購物車模塊的JS代碼之前，需要引入jQuery文件
$(function() {
    // 1. 全選 全不選功能模塊
    // 就是把全選按鈕（checkall）的狀態賦值給 三個小的按鈕（j-checkbox）就可以了
    // 事件可以使用change
    $(".checkall").change(function() {
        // console.log($(this).prop("checked"));
        $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            // 讓所有的商品添加 check-cart-item 類名
            $(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(".cart-item").removeClass("check-cart-item");
        }
    });
    // 2. 如果小復選框被選中的個數等於3 就應該把全選按鈕選上，否則全選按鈕不選。
    $(".j-checkbox").change(function() {
        // if(被選中的小的復選框的個數 === 3) {
        //     就要選中全選按鈕
        // } else {
        //     不要選中全選按鈕
        // }
        // console.log($(".j-checkbox:checked").length);
        // $(".j-checkbox").length 這個是所有的小復選框的個數
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            // 讓當前的商品添加 check-cart-item 類名
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            // check-cart-item 移除
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    });
    // 3. 增減商品數量模塊 首先聲明一個變量，當我們點擊+號（increment），就讓這個值++，然后賦值給文本框。
    $(".increment").click(function() {
        // 得到當前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        // 3. 計算小計模塊 根據文本框的值 乘以 當前商品的價格  就是 商品的小計
        // 當前商品的價格 p  
        // parent().parents().siblings(".p-price")可以替換為parents()返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        var price = (p * n).toFixed(2);
        // 小計模塊 
        // toFixed(2) 可以讓我們保留2位小數
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    });
    $(".decrement").click(function() {
        // 得到當前兄弟文本框的值
        var n = $(this).siblings(".itxt").val();
        if (n == 1) {
            // 遇到return，后面的代碼就不會再執行了
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
        // var p = $(this).parent().parent().siblings(".p-price").html();
        // parents(".p-num") 返回指定的祖先元素
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        console.log(p);
        // 小計模塊 
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    //  4. 用戶修改文本框的值 計算 小計模塊  
    $(".itxt").change(function() {
        // 先得到文本框的里面的值 乘以 當前商品的單價 
        var n = $(this).val();
        // 當前商品的單價
        var p = $(this).parents(".p-num").siblings(".p-price").html();
        // console.log(p);
        p = p.substr(1);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        getSum();
    });
    // 5. 計算總計和總額模塊
    getSum();

    function getSum() {
        var count = 0; // 計算總件數 
        var money = 0; // 計算總價錢
        $(".itxt").each(function(i, ele) {
            count += parseInt($(ele).val());
        });
        $(".amount-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            money += parseFloat($(ele).text().substr(1));
        });
        $(".price-sum em").text("￥" + money.toFixed(2));
    }
    // 6. 刪除商品模塊
    // (1) 商品后面的刪除按鈕
    $(".p-action a").click(function() {
        // 刪除的是當前的商品 
        $(this).parents(".cart-item").remove();
        getSum();
    });
    // (2) 刪除選中的商品
    $(".remove-batch").click(function() {
        // 刪除的是小的復選框選中的商品
        $(".j-checkbox:checked").parents(".cart-item").remove();
        getSum();
    });
    // (3) 清空購物車 刪除全部商品
    $(".clear-all").click(function() {
        $(".cart-item").remove();
        getSum();
    })
})