購物車功能：使用jQuery實(shí)現(xiàn)購物車全選反選，單選，商品增刪，小計(jì)等功能

效果圖：

canvas.png

html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模擬購物車功能-jq</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" />
     <link rel="stylesheet" href="css/shopCart.css" />
    <script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
</head>
<body>
    
    <table class="table">
        <tr>
            <th id="checkAll"><label><input type="checkbox" checked  />全選</label><button>刪除</button></th>
            <th>商品名稱</th>
            <th>商品價(jià)格(元)</th>
            <th>數(shù)目</th>
            <th>小計(jì)(元)</th>
            <th>操作</th>
        </tr>
        <tr>
            <td class="check"><label><input type="checkbox"  checked /></label></td>
            <td>商品名稱1</td>
            <td class="price">22.50</td>
            <td><span class="sub">-</span><input type="text" value="1" class="num"/><span class="add">+</span></td>
            <td class="subtotal">22.50</td>
            <td class="del"><button>刪除</button></td>
        </tr>
        <tr>
            <td class="check"><label><input type="checkbox" checked /></label></td>
            <td>商品名稱2</td>
            <td class="price">12.50</td>
            <td><span class="sub">-</span><input type="text" value="1" class="num"/><span class="add">+</span></td>
            <td class="subtotal">12.50</td>
            <td class="del"><button>刪除</button></td>
        </tr>
        <tr>
            <td class="check"><label><input type="checkbox" checked /></label></td>
            <td>商品名稱3</td>
            <td class="price">110.40</td>
            <td><span class="sub">-</span><input type="text" value="1" class="num"/><span class="add">+</span></td>
            <td class="subtotal">110.40</td>
            <td class="del"><button>刪除</button></td>
        </tr>
        <tr>
            <td colspan="5" style="text-align: right;">總件數(shù)：<i id="numAll">0</i>件  &nbsp; &nbsp;   總計(jì)：<i id="total">0.00</i>元</td>
        </tr>
    </table>
    
    <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/shopCart.js" type="text/javascript" charset="utf-8"></script>
    
</body>
</html>

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"); //獲取當(dāng)前input的狀態(tài)
        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();
    })

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

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

    //數(shù)目減
    $(".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);

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

    //文本框脫里焦點(diǎn)處理
    $('.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();
            }

        }
    })

    //總價(jià)格
    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);
    }
    //總數(shù)目
    counts();

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

})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容