购物车功能：使用jQuery实现购物车全选反选，单选，商品增删，小计等功能

效果图：

canvas.png

html：

    
    
    
     
    


    
    

        

            
全选删除
            
商品名称
            
商品价格(元)
            
数目
            
小计(元)
            
操作
        
        

            

            
商品名称1
            
22.50
            
-+
            
22.50
            
删除
        
        

            

            
商品名称2
            
12.50
            
-+
            
12.50
            
删除
        
        

            

            
商品名称3
            
110.40
            
-+
            
110.40
            
删除
        
        

            
总件数：0件        总计：0.00元
        
    
    
    
    
    

css样式：

*{
    margin:0;
    padding: 0;
}

table th,table td,input{
    text-align: center;
}
table #checkAll{
    width: 150px;
}
table #checkAll label{
    cursor: pointer;
    background: url(../img/confirm.png) no-repeat center left;
    padding-left:10px;
}
 table .check label{
    cursor: pointer;
    background: url(../img/confirm.png) no-repeat center;
}

table #checkAll input, table .check input{
    visibility: hidden;
    
}

table input[type="text"]{
    width: 50px;
    overflow: hidden;
}
table span{
    display: inline-block;
    width: 20px;
    background: #8C8C8C;
    margin:0px 5px ;
    color: #FFFFFF;
    cursor: pointer;
}

js：

$(function() {

    // 全选
    $("#checkAll input").click(function() {
        var flag = $(this).prop("checked");
        if(flag) {
            $(".check label input").prop("checked", true);

            $("#checkAll label").css("background", "url(img/confirm.png) no-repeat center left");
            $(".check label").css("background", "url(img/confirm.png) no-repeat center");

        } else {
            $(".check label input").prop("checked", false);

            $("#checkAll label").css("background", "url(img/confirm_no.png) no-repeat center left");
            $(".check label").css("background", "url(img/confirm_no.png) no-repeat center");
        }
        counts();
        totalPrice();
    });

    //单选
    $(".check input").click(function() {
        var flag = $(this).prop("checked"); //获取当前input的状态
        var CL = $(".check input").length; //列表长度；
        var CH = $(".check input:checked").length; //列表中被选中的长度

        if(flag) {
            $(this).parent("label").css("background", "url(img/confirm.png) no-repeat center");
        } else {
            $(this).parent("label").css("background", "url(img/confirm_no.png) no-repeat center");
        }

        if(CL == CH) {
            $("#checkAll input").prop("checked", true);
            $("#checkAll label").css("background", "url(img/confirm.png) no-repeat center left");
        } else {
            $("#checkAll input").prop("checked", false);
            $("#checkAll label").css("background", "url(img/confirm_no.png) no-repeat center left");
        }
        counts();
        totalPrice();
    })

    //数目加
    $(".add").click(function() {
        var num = $(this).prev().val();
        var price = parseFloat($(this).parent().siblings(".price").text());
        num++;
        $(this).prev().val(num);

        //      小计
        $(this).parent().siblings(".subtotal").text((price * num).toFixed(2));
        counts();
        totalPrice();
    })

    //数目减
    $(".sub").click(function() {
        var num = $(this).next().val();
        var price = parseFloat($(this).parent().siblings(".price").text());
        num--;

        if(num <= 0) {
            num = 0
        }
        $(this).next().val(num);

        //      小计
        $(this).parent().siblings(".subtotal").text((price * num).toFixed(2));
        counts();
        totalPrice();
    })

    //文本框脱里焦点处理
    $('.num').each(function(i) {
        $(this).blur(function() {
            let p = parseFloat($(this).parents('tr').find(".subtotal").text());
            let c = parseFloat(this.value);
            console.log(p*c);
            $(this).parents('tr').find(".subtotal").text((c * p).toFixed(2));
            counts();
            totalPrice();
        })
    })

    //单行删除
    $(".del button").click(function() {
        var flag = $(this).parent().siblings().find("input").prop("checked");
        if(flag) {
            if(confirm("是否确定删除")) {
                $(this).parents("tr").remove();
                var CL = $(".check input").length; //列表长度；
                if(CL == 0) {
                    $("#checkAll label input").prop("checked", false);
                    $("#checkAll label").css("background", "url(img/confirm_no.png) no-repeat center left");
                }
                counts();
                totalPrice();
            }
        }
    })

    //全删除
    $("#checkAll button").click(function() {
        var flag = $(this).prev().children().prop("checked");
        //        console.log(flag);
        if(flag) {

            if(confirm("是否确定删除")) {

                $(".check").parent().remove();
                var CL = $(".check input").length; //列表长度；

                if(CL == 0) {
                    $("#checkAll label input").prop("checked", false);
                    $("#checkAll label").css("background", "url(img/confirm_no.png) no-repeat center left");
                }
                counts();
                totalPrice();
            }

        }
    })

    //总价格
    totalPrice();

    function totalPrice() {
        var prices = 0;
        $('.check input:checked').each(function(i) {
            console.log()
            prices += parseFloat($(this).parents("tr").find('.subtotal').text());
        })
        $('#total').text(prices);
    }
    //总数目
    counts();

    function counts() {
        var sum = 0;
        $('.check input:checked').each(function(i) {
            sum += parseInt($(this).parents("tr").find('.num').val());
        })
        $('#numAll').text(sum);
    }

})