找回密码
当前位置：前端开发者 > 未分类 > 正文

jQuery前端开发_多店铺购物车结算全选及价格计算

2018-07-06 分类：未分类 阅读(565) 评论(0)

哪里有h5前端开发工程师培训电话？|非开发人员可以使用的前端工具|web前端开发工作累吗？

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”utf-8″>
    <title>web前端开发代码大全：购物车结算</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-family: “微软雅黑”
        }
        .one-shop,
        .all-total {
            padding: 20px;
            width: 400px;
            margin: auto
        }
        .one-goods {
            height: 35px;
            line-height: 35px
        }
        .goods-msg,
        .goods-price {
            float: left;
            padding: 0 10px 0 0
        }
        .goods-check {
            width: 15px;
            height: 15px
        }
        .am-num-text {
            width: 50px;
            text-align: center
        }
        .shop-total,
        .all-total {
            height: 50px;
            line-height: 50px
        }
    </style>
</head>
<body>
    <!– 一个店铺 –>
    <div class=”one-shop”>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg”>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>20.00</span>
            </div>
        </div>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg”>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>9.90</span>
            </div>
        </div>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg “>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>10.00</span>
            </div>
        </div>
        <!– 店铺合计 –>
        <div class=”shop-total”>
            <input type=”checkbox” class=”goods-check ShopCheck”>店铺全选&nbsp;&nbsp;&nbsp;&nbsp; 本店合计：￥
            <span class=”shop-total-amount ShopTotal”>0</span>
        </div>
    </div>
    <!– 一个店铺 –>
    <div class=”one-shop”>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg”>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>20.00</span>
            </div>
        </div>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg”>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>9.90</span>
            </div>
        </div>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg “>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>10.00</span>
            </div>
        </div>
        <!– 店铺合计 –>
        <div class=”shop-total”>
            <input type=”checkbox” class=”goods-check ShopCheck”>店铺全选&nbsp;&nbsp;&nbsp;&nbsp; 本店合计：￥
            <span class=”shop-total-amount ShopTotal”>0</span>
        </div>
    </div>
    <!– 一个店铺 –>
    <div class=”one-shop”>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg”>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>20.00</span>
            </div>
        </div>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg”>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>9.90</span>
            </div>
        </div>
        <!– 一个商品 –>
        <div class=”one-goods”>
            <div class=”goods-msg “>
                <input type=”checkbox” class=”goods-check GoodsCheck”>
                <button type=”button” class=”minus”>-</button>
                <input type=”text” class=”am-num-text” value=”1″ />
                <button type=”button” class=”plus”>+</button>
            </div>
            <div class=”goods-price”>
                单价：￥
                <span class=”shop-total-amount GoodsPrice”>10.00</span>
            </div>
        </div>
        <!– 店铺合计 –>
        <div class=”shop-total”>
            <input type=”checkbox” class=”goods-check ShopCheck”>店铺全选&nbsp;&nbsp;&nbsp;&nbsp; 本店合计：￥
            <span class=”shop-total-amount ShopTotal”>0</span>
        </div>
    </div>
    <!– 总计 –>
    <div class=”all-total”>
        <input type=”checkbox” class=”goods-check” id=”AllCheck”>全选&nbsp;&nbsp;&nbsp;&nbsp; 总价合计：￥
        <span class=”shop-total-amount” id=”AllTotal”>0</span>
    </div>
    <script src=”http://code.jquery.com/jquery-2.2.0.min.js”></script>
    <script>
        // 数量减
        $(“.minus”).click(function () {
            var t = $(this).parent().find(‘.am-num-text’);
            t.val(parseInt(t.val()) – 1);
            if (t.val() <= 1) {
                t.val(1);
            }
            TotalPrice();
        });
        // 数量加
        $(“.plus”).click(function () {
            var t = $(this).parent().find(‘.am-num-text’);
            t.val(parseInt(t.val()) + 1);
            if (t.val() <= 1) {
                t.val(1);
            }
            TotalPrice();
        });
        // 点击商品按钮
        $(“.GoodsCheck”).click(function () {
            var goods = $(this).closest(“.one-shop”).find(“.GoodsCheck”); //获取本店铺的所有商品
            var goodsC = $(this).closest(“.one-shop”).find(“.GoodsCheck:checked”); //获取本店铺所有被选中的商品
            var Shops = $(this).closest(“.one-shop”).find(“.ShopCheck”); //获取本店铺的全选按钮
            if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
                Shops.prop(‘checked’, true); //店铺全选按钮被选中
                if ($(“.ShopCheck”).length == $(“.ShopCheck:checked”).length) { //如果店铺被选中的数量等于所有店铺的数量
                    $(“#AllCheck”).prop(‘checked’, true); //全选按钮被选中
                    TotalPrice();
                } else {
                    $(“#AllCheck”).prop(‘checked’, false); //else全选按钮不被选中
                    TotalPrice();
                }
            } else { //如果选中的商品不等于所有商品
                Shops.prop(‘checked’, false); //店铺全选按钮不被选中
                $(“#AllCheck”).prop(‘checked’, false); //全选按钮也不被选中
                // 计算
                TotalPrice();
                // 计算
            }
        });
        // 点击店铺按钮
        $(“.ShopCheck”).change(function () {
            if ($(this).prop(“checked”) == true) { //如果店铺按钮被选中
                $(this).parents(“.one-shop”).find(“.goods-check”).prop(‘checked’, true); //店铺内的所有商品按钮也被选中
                if ($(“.ShopCheck”).length == $(“.ShopCheck:checked”).length) { //如果店铺被选中的数量等于所有店铺的数量
                    $(“#AllCheck”).prop(‘checked’, true); //全选按钮被选中
                    TotalPrice();
                } else {
                    $(“#AllCheck”).prop(‘checked’, false); //else全选按钮不被选中
                    TotalPrice();
                }
            } else { //如果店铺按钮不被选中
                $(this).parents(“.one-shop”).find(“.goods-check”).prop(‘checked’, false); //店铺内的所有商品也不被全选
                $(“#AllCheck”).prop(‘checked’, false); //全选按钮也不被选中
                TotalPrice();
            }
        });
        // 点击全选按钮
        $(“#AllCheck”).click(function () {
            if ($(this).prop(“checked”) == true) { //如果全选按钮被选中
                $(“.goods-check”).prop(‘checked’, true); //所有按钮都被选中
                TotalPrice();
            } else {
                $(“.goods-check”).prop(‘checked’, false); //else所有按钮不全选
                TotalPrice();
            }
            $(“.ShopCheck”).change(); //执行店铺全选的操作
        });
        function TotalPrice() {
            var allprice = 0; //总价
            $(“.one-shop”).each(function () { //循环每个店铺
                var oprice = 0; //店铺总价
                $(this).find(“.GoodsCheck”).each(function () { //循环店铺里面的商品
                    if ($(this).is(“:checked”)) { //如果该商品被选中
                        var num = parseInt($(this).parents(“.one-goods”).find(“.am-num-text”).val()); //得到商品的数量
                        var price = parseFloat($(this).parents(“.one-goods”).find(“.GoodsPrice”).text()); //得到商品的单价
                        var total = price * num; //计算单个商品的总价
                        oprice += total; //计算该店铺的总价
                    }
                    $(this).closest(“.one-shop”).find(“.ShopTotal”).text(oprice.toFixed(2)); //显示被选中商品的店铺总价
                });
                var oneprice = parseFloat($(this).find(“.ShopTotal”).text()); //得到每个店铺的总价
                allprice += oneprice; //计算所有店铺的总价
            });
            $(“#AllTotal”).text(allprice.toFixed(2)); //输出全部总价
        }
    </script>
</body>
</html>

web前端开发源代码的意思|武汉前端开发工资多少？|开发手机网站用什么前端ui？

赞(1)
前端开发者 » jQuery前端开发_多店铺购物车结算全选及价格计算
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论