1. 技术文章
  2. jquery-购物车js

jquery-购物车js

由 狂风中的少年 提交于 2020-01-20 23:24:55

购物车示例js,为了方便参考，页面写的比较简单。示例如下图所示：

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>
标签
js代码
input
num
按钮
jquery
js
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!