jquery-購物車js

時間 2019-12-06

原文原文鏈接

購物車示例js,爲了方便參考，頁面寫的比較簡單。示例以下圖所示：html

html代碼以下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        .product{
            width: 450px;
        }
        .product-price{
            float: right;
        }
        .total{
            float: right;
        }
        input[type='text']{
            width: 50px;
        }
    </style>
    <title>購物車結算</title>
</head>
<body>
<div>

    <!--第一個店鋪-->
    <div>店鋪1</div>
    <div class="store">
        <!--第一個商品-->
        <div class="product"><span>商品A</span>
            <input  class="product-check"   type="checkbox"/>
            <button class="min">-</button>
            <input  class="num" type="text" value="1"/>
            <button class="max">+</button>
            <div class="product-price">
                <span>單價：￥</span><b class="product-one-price">10</b>
                <span>總計：￥</span><b class="product-total-price">0.00</b></div>
        </div>
        <!--第二個商品-->
        <div class="product"><span>商品B</span>
            <input  class="product-check" type="checkbox"/>
            <button class="min">-</button>
            <input  class="num" type="text" value="1"/>
            <button class="max">+</button>
            <div class="product-price">
                <span>單價：￥</span><b class="product-one-price">19.99</b>
                <span>總計：￥</span><b class="product-total-price">0.00</b></div>
        </div>
        <!--第三個商品-->
        <div class="product"><span>商品C</span>
            <input  class="product-check" type="checkbox"/>
            <button class="min">-</button>
            <input  class="num" type="text" value="1"/>
            <button class="max">+</button>
            <div class="product-price">
                <span>單價：￥</span><b class="product-one-price">19.99</b>
                <span>總計：￥</span><b class="product-total-price">0.00</b></div>
        </div>
        <div>
            <input  class="store-check" type="checkbox"/>
            <span>店鋪全選 本店合計：￥</span>
            <b class="store-total-price">0.00</b>
        </div>
    </div>

    <div>店鋪2</div>
    <div class="store">
        <!--第一個商品-->
        <div class="product"><span>商品D</span>
            <input  class="product-check" type="checkbox"/>
            <button class="min">-</button>
            <input  class="num" type="text" value="1"/>
            <button class="max">+</button>
            <div class="product-price">
                <span>單價：￥</span><b class="product-one-price">19.99</b>
                <span>總計：￥</span><b class="product-total-price">0.00</b></div>
        </div>
        <!--第二個商品-->
        <div class="product"><span>商品E</span>
            <input  class="product-check" type="checkbox"/>
            <button class="min">-</button>
            <input  class="num" type="text" value="1"/>
            <button class="max">+</button>
            <div class="product-price">
                <span>單價：￥</span><b class="product-one-price">19.99</b>
                <span>總計：￥</span><b class="product-total-price">0.00</b></div>
        </div>
        <!--第三個商品-->
        <div class="product"><span>商品F</span>
            <input  class="product-check" type="checkbox"/>
            <button class="min">-</button>
            <input  class="num" type="text" value="1"/>
            <button class="max">+</button>
            <div class="product-price">
                <span>單價：￥</span><b class="product-one-price">19.99</b>
                <span>總計：￥</span><b class="product-total-price">0.00</b></div>
        </div>
        <div>
            <input  class="store-check" type="checkbox"/>
            <span>店鋪全選 本店合計：￥</span>
            <b class="store-total-price">0.00</b>
        </div>
    </div>

    <div>
        <input  class="total-check" type="checkbox"/>
        <span>全選 合計：￥</span>
        <b class="total-price">0.00</b>
        <span>共計</span>
        <b class="total-product-num">0</b>
        <span>件商品</span>
    </div>
</div>

</div>
</body>

</html>

jquery代碼以下：

<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script>
    //商品數量輸入
    $(".num").keyup(function(){
        var tmptxt=$(this).val();
        $(this).val(tmptxt.replace(/\D|^0/g,''));//限制輸入的內容，只能是1-9的數字
    }).bind("paste",function(){
        var tmptxt=$(this).val();
        $(this).val(tmptxt.replace(/\D|^0/g,''));//限制複製的內容，只能是1-9的數字
    }).bind("input propertychange",function(){
        var price= 0 ;
        price=parseFloat($(this).parents(".product").find(".product-one-price").text() * $(this).val());
        if(isNaN(price)){
            price=$(this).parents(".product").find(".product-one-price").text() * 1;//若輸入的不爲數字默認爲1
        }
         $(this).parents(".product").find(".product-total-price").text(price.toFixed(2)); //顯示被選中商品的總價
        TotalPrice();
    }).blur(function(){
        if($(this).val()=='') {
            $(this).val(1);//若是輸入爲0，失去焦點時默認爲1
        }
        var price= 0 ;
        price=parseFloat($(this).parents(".product").find(".product-one-price").text() * $(this).val());
        if(isNaN(price)){
            price=$(this).parents(".product").find(".product-one-price").text() * 1;//若輸入的不爲數字默認爲1
        }
        $(this).parents(".product").find(".product-total-price").text(price.toFixed(2)); //顯示被選中商品的總價
        TotalPrice();
    });

    // 數量減
    $(".min").click(function() {
        var t = $(this).parent().find('.num');
        t.val(parseInt(t.val()) - 1);
        if (t.val() <= 1) {
            t.val(1);
        }
        var price=0;
        price=$(this).parent(".product").find(".product-one-price").text() * t.val();
        $(this).parent(".product").find(".product-total-price").text(price.toFixed(2));
        TotalPrice();
    });

    // 數量加
    $(".max").click(function() {
        var t = $(this).parent().find('.num');
        t.val(parseInt(t.val()) + 1);
        if (t.val() <= 1) {
            t.val(1);
        }
        var price=0;
        price=$(this).parent(".product").find(".product-one-price").text() * t.val();
        $(this).parent(".product").find(".product-total-price").text(price.toFixed(2));
        TotalPrice();
    });

    // 點擊商品按鈕
    $(".product-check").click(function() {
        //closest(最靠近的)
        var goods = $(this).closest(".store").find(".product-check"); //獲取本店鋪的全部商品
        var goodsC = $(this).closest(".store").find(".product-check:checked"); //獲取本店鋪全部被選中的商品
        var shopC = $(this).closest(".store").find(".store-check"); //獲取本店鋪的全選按鈕
        if (goods.length == goodsC.length) { //若是選中的商品等於全部商品
            shopC.prop('checked', true); //店鋪全選按鈕被選中
            if ($(".store-check").length == $(".store-check:checked").length) { //若是店鋪被選中的數量等於全部店鋪的數量
                $(".total-check").prop('checked', true); //全選按鈕被選中
                TotalPrice();
            } else {
                $(".total-check").prop('checked', false); //else全選按鈕不被選中
                TotalPrice();
            }
        } else { //若是選中的商品不等於全部商品
            shopC.prop('checked', false); //店鋪全選按鈕不被選中
            $(".total-check").prop('checked', false); //全選按鈕也不被選中
            // 計算
            TotalPrice();
            // 計算
        }
    });

    // 點擊店鋪按鈕
    $(".store-check").change(function() {
        if ($(this).prop("checked") == true) { //若是店鋪按鈕被選中
            $(this).parents(".store").find(".product-check").prop('checked', true); //店鋪內的全部商品按鈕也被選中
            if ($(".store-check").length == $(".store-check:checked").length) { //若是店鋪被選中的數量等於全部店鋪的數量
                $(".total-check").prop('checked', true); //全選按鈕被選中
                TotalPrice();
            } else {
                $(".total-check").prop('checked', false); //else全選按鈕不被選中
                TotalPrice();
            }
        } else { //若是店鋪按鈕不被選中
            $(this).parents(".store").find(".product-check").prop('checked', false); //店鋪內的全部商品也不被全選
            $(".total-check").prop('checked', false); //全選按鈕也不被選中
            TotalPrice();
        }
    });

    //點擊全選按鈕
    $(".total-check").click(function() {
        if ($(this).prop("checked") == true) { //若是全選按鈕被選中
            $(".product-check").prop('checked', true); //全部商品都被選中
            $(".store-check").prop('checked', true); //全部店鋪都被選中
            TotalPrice();
        } else {
            $(".product-check").prop('checked', false); //else全部商品按鈕不全選
            $(".store-check").prop('checked', false); //全部店鋪按鈕不全選
            TotalPrice();
        }
    });

    function TotalPrice() {
        var allprice = 0; //總價
        $(".store").each(function() { //循環每一個店鋪
            var oprice = 0; //店鋪總價
            $(this).find(".product-check").each(function() { //循環店鋪裏面的商品
                var total=0;//單個商品的總價
                if ($(this).is(":checked")) { //若是該商品被選中
                    var num = parseInt($(this).parents(".product").find(".num").val()); //獲得商品的數量
                    var price = parseFloat($(this).parents(".product").find(".product-one-price").text()); //獲得商品的單價
                    var total = price * num; //計算單個商品的總價
                    if(isNaN(total)){
                        total = price * 1;
                    }
                    oprice += total; //計算該店鋪的總價
                }
                $(this).closest(".store").find(".store-total-price").text(oprice.toFixed(2)); //顯示被選中商品的店鋪總價
            });
            var oneprice = parseFloat($(this).find(".store-total-price").text()); //獲得每一個店鋪的總價
            allprice += oneprice; //計算全部店鋪的總價
        });
        $(".total-product-num").text($(".product-check:checked").length);//共計幾件商品
        $(".total-price").text(allprice.toFixed(2)); //輸出所有總價
    }
</script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。