仿淘宝购物车模块，关键练习js

html代码部分

    
    
    
    
    
    
    



    
        全部商品
    
    
    
        
        
            
                 全选
            
            商品
            单价
            数量
            小计
            操作
        
        
        
            
                
                    
                
                
                    
                        
                    
                    【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
                
                ￥22.50
                
                    -+
                
                ￥22.50
                删除
            
            
                
                    
                
                
                    
                        
                    
                    【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
                
                ￥29.80
                
                    -+
                
                ￥29.80
                删除
            
            
                
                    
                
                
                    
                        
                    
                    【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
                
                ￥19.80
                
                    -+
                
                ￥19.80
                删除
            
            
                
                    
                
                
                    
                        
                    
                    【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
                
                ￥32.40
                
                    -+
                
                ￥32.40
                删除
            
            
            
                
                    全选
                
                
                    删除选中的商品
                    清理购物车
                
                
                    已选 1 件商品
                    总价: ￥12.60
                    去结算
                
            
        
    

css代码部分

.cart-wrap {
    width: 1225px;
}

.cart-filter-bar {
    font-weight: 500;
    color: #ff0000;
    font-size: 20px;
    width: 80px;
    height: 40px;
    line-height: 50px;
    border-bottom: 1px solid #ff0000;
    text-align: center;
}

em {
    font-style: normal;
}

.cart-thread {
    height: 60px;
    line-height: 60px;
    background-color: #ccc;
    text-align: center;
}

.cart-thread div {
    float: left;
}

.t-checkbox {
    width: 130px;
    text-align: left;
    padding-left: 20px;
}

.t-goods {
    width: 400px;
    text-align: left;
}

.t-price {
    width: 150px;
}

.t-num {
    width: 150px;
}

.t-sum {
    width: 150px;
}

.t-action {
    width: 150px;
}

.cart-item-list {
    width: 1230px;
    background-color: rgb(255, 212, 212);
}

.cart-item-list div {
    float: left;
}

.cart-item {
    width: 1200px;
    padding-left: 20px;
    height: 150px;
    border: 1px solid #ccc;
    border-bottom: 0;
}

.p-checkbox {
    padding-top: 20px;
    width: 50px;
    height: 100px;
}

.p-goods {
    float: left;
    width: 480px;
    height: 150px;
    padding-top: 20px;
}

.p-goods .p-img img {
    width: 100px;
    height: 100px;
}

.p-msg {
    float: left;
    font-size: 12px;
    width: 200px;
    margin-left: 20px;
}

.p-price {
    padding-top: 20px;
    width: 150px;
    text-align: center;
}

.p-num {
    padding-top: 20px;
    width: 152px;
    text-align: center;
}

.p-num a {
    text-decoration: none;
    color: #000;
}

.quantity-form {
    width: 100px;
    margin-left: 24px;
    
    border: 1px solid #000;
    text-align: center;
}

.quantity-form input {
    width: 50px;
    text-align: center;
    border: 0;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
}

.quantity-form a {
    width: 22px;
    display: inline-block;
    text-align: center;
    color: #000;
    background-color: #fff;
}

.p-sum {
    padding-top: 20px;
    width: 150px;
    text-align: center;
}

.p-action {
    padding-top: 20px;
    width: 150px;
    text-align: center;
}

a {
    text-decoration: none;
    color: #000;
}

.cart-floatbar {
    width: 1220px;
    height: 50px;
    line-height: 50px;
    border: 1px solid #000;
}

.select-all {
    width: 100px;
    padding-left: 20px;
}

.operation {
    width: 800px;
    font-size: 12px;
}

.operation a {
    display: inline-block;
    width: 100px;
    text-align: center;
}

.toolbar-right {
    width: 300px;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
}

.amout-sum {
    width: 100px;
}

.amout-sum em {
    color: #dd0000;
    font-weight: 600;
    font-size: 16px;
}

.price-sum {
    width: 120px;
}

.price-sum em {
    color: #dd0000;
    font-weight: 600;
    font-size: 16px;
}

.btn-area {
    width: 80px;
    height: 50px;
    font-size: 16px;
    line-height: 45px;
    color: #fff;
    font-weight: 700;
    background-color: #dd0000;
    text-align: center;
}

.checkbox-item-checked {
    background-color: rgb(255, 218, 218);
}

js代码部分

$(function() {
    // 1.全选全不选模块
    $(".checkall").change(function() {
        $(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"));
        if ($(this).prop("checked")) {
            $(".cart-item").addClass("checkbox-item-checked");
        } else {
            $(".cart-item").removeClass("checkbox-item-checked");
        }
        getsum();
    });

    // 2.如果有一个复选框全被选中，则全选
    $(".j-checkbox").change(function() {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".checkall").prop("checked", true);
        } else {
            $(".checkall").prop("checked", false);
        }
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("checkbox-item-checked");
        } else {
            $(this).parents(".cart-item").removeClass("checkbox-item-checked");
        }
        getsum();
    });

    // 3. (1) 点击增加商品数量，总价随之增加
    $(".increment").click(function() {
        // 获取当前商品数量
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
        // 获取当前商品单价p
        var p = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
        // 添加商品总价
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        // console.log(p);
        getsum();
    });
    // 3. (2) 点击减少商品数量，总价随之减少
    $(".decrement").click(function() {
        // 获取当前商品数量
        var n = $(this).siblings(".itxt").val();
        if (n <= 1) {
            return false;
        }
        n--;
        $(this).siblings(".itxt").val(n);
        // 获取当前商品单价p
        var p = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
        // 添加商品总价
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
        // console.log(p);
        getsum();
    });
    getsum();
    // 4. 计算商品总数量以及总价钱
    function getsum() {
        var count = 0;
        var money = 0;
        // 想加个限制条件，如果小复选框选中，才计算总数值
        // if ($(".j-checkbox").prop("checked")) {
        $(".itxt").each(function(i, ele) {
            if ($(".itxt").eq(i).parents(".p-num").siblings(".p-checkbox").children(".j-checkbox").prop("checked")) {
                count += parseInt($(ele).val());
            }
        })
        $(".amout-sum em").text(count);
        $(".p-sum").each(function(i, ele) {
            if ($(".p-sum").eq(i).siblings(".p-checkbox").children(".j-checkbox").prop("checked")) {
                money += parseFloat($(ele).text().substr(1));
            }
        })
        $(".price-sum em").html("￥" + money.toFixed(2));
    };
    // 删除商品操作
    // 1. 单独删除每个商品
    $(".p-action").click(function() {
        $(this).parent(".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();
    });
})

说明：在pink老师教学的基础上，增加了对小复选框的判断，只有被选中的小复选框才会被计算数量及总价。