jquery+bootstrap实现购物车增减数量价格变动效果代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：jquery+bootstrap实现购物车增减数量价格变动效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css">
</head>

<style lang="scss">
    .shopping-car-container {
        padding: 50px 40px;
    }

        .shopping-car-container .car-headers-menu {
            border-bottom: 1px solid #f5f5f5;
            padding: 0 15px;
        }

        .shopping-car-container .panel-body {
            padding: 15px 0;
        }

    #checkAll {
        vertical-align: text-bottom;
    }

    .shopping-car-container .car-menu {
        text-align: center;
    }
    /*
         商品区
         * */

    .shopping-car-container .goods-content {
        margin-top: 15px;
    }

        .shopping-car-container .goods-content .goods-item {
            margin-top: 20px;
        }

            .shopping-car-container .goods-content .goods-item .car-goods-info {
                height: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
                overflow: hidden;
            }

            .shopping-car-container .goods-content .goods-item .goods-image-column img,
            .shopping-car-container .goods-content .goods-item .goods-image-column span {
                display: block;
                float: left;
            }

            .shopping-car-container .goods-content .goods-item .goods-image-column span {
                width: calc(100% - 100px);
                box-sizing: border-box;
                text-indent: 2rem;
                line-height: 25px;
                padding: 10px;
            }

    .goods-price {
        color: red;
        font-weight: bolder;
    }

    .form-control {
        text-align: center;
    }

    .single-total {
        color: red;
        font-weight: bold;
    }

    .goods-params {
        color: darkgray;
    }

    .bottom-menu {
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .bottom-menu #checkAllBottom {
            vertical-align: text-bottom;
        }

    #deleteMulty {
        color: cornflowerblue;
        cursor: pointer;
        vertical-align: text-bottom;
    }

    .bottom-menu-include {
        background: #e5e5e5;
    }

    #selectGoodsCount {
        color: orangered;
        font-size: 16px;
        font-weight: bolder;
    }

    #selectGoodsMoney {
        color: orangered;
        font-size: 16px;
        font-weight: bolder;
    }

    .panel-default .submitData {
        background: orangered;
        font-size: 16px;
        color: white;
        cursor: pointer;
        font-weight: bolder;
        height: 58px;
        position: absolute;
        right: 0;
        top: 0;
    }

    .panel-default .submitDis {
        background: #B0B0B0;
        cursor: no-drop;
    }

    .shopping-car-container .panel-default {
        position: relative;
    }
</style>
<body>
    <div class="shopping-car-container">
        <div class="car-headers-menu">
            <div class="row">
                <div class="col-md-1 car-menu">
                    <label><input type="checkbox" id="check-goods-all" /><span id="checkAll">全选</span></label>
                </div>
                <div class="col-md-3 car-menu">商品信息</div>
                <div class="col-md-2 car-menu">商品参数</div>
                <div class="col-md-1 car-menu">单价</div>
                <div class="col-md-1 car-menu">数量</div>
                <div class="col-md-1 car-menu">金额</div>
                <div class="col-md-2 car-menu">操作</div>
            </div>
        </div>
        <div class="goods-content">

        </div>
        <div class="panel panel-default">
            <div class="panel-body bottom-menu-include">
                <div class="col-md-1 check-all-bottom bottom-menu">
                    <label>
                        <input type="checkbox" id="checked-all-bottom" />
                        <span id="checkAllBottom">全选</span>
                    </label>
                </div>
                <div class="col-md-1 bottom-menu">
                    <span id="deleteMulty">
                        删除
                    </span>
                </div>
                <div class="col-md-6 bottom-menu">
                </div>
                <div class="col-md-2 bottom-menu">
                    <span>已选商品 <span id="selectGoodsCount">0</span> 件</span>
                </div>
                <div class="col-md-1 bottom-menu">
                    <span>合计：<span id="selectGoodsMoney">0.00</span></span>
                </div>
                <div class="col-md-1 bottom-menu submitData submitDis">
                    结算
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="deleteItemTip" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                    </div>
                    <div class="modal-body">
                        确认删除此商品？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary deleteSure">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="selectItemTip" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                    </div>
                    <div class="modal-body">
                        请选择要删除的商品！
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" tabindex="-1" role="dialog" id="deleteMultyTip" aria-labelledby="gridSystemModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="gridSystemModalLabel">提示</h4>
                    </div>
                    <div class="modal-body">
                        确认删除选择的商品！
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary deleteMultySure">确定</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script>
<script type="text/javascript">
    var goodsList = [{
        id: 1234564876,
        imgUrl: '//repo.bfw.wiki/bfwrepo/image/5ff8f9c4688b7.png',
        goodsInfo: '号地块健身房回复的科技示范户快速坚实的看了看大家发快递了很费劲的开始放假',
        goodsParams: '四季度后付款的酸辣粉',
        price: 199,
        goodsCount: 1,
        singleGoodsMoney: 199
    },
        {
            id: 1234564876,
            imgUrl: '//repo.bfw.wiki/bfwrepo/image/5ff8f9d574eb5.png',
            goodsInfo: '号地块健身房回复的科技示范户快速坚实的看了看大家发快递了很费劲的开始放假',
            goodsParams: '四季度后付款的酸辣粉',
            price: 299,
            goodsCount: 2,
            singleGoodsMoney: 598
        },
        {
            id: 1234564876,
            imgUrl: '//repo.bfw.wiki/bfwrepo/image/5ff8f9e5b4e43.png',
            goodsInfo: '号地块健身房回复的科技示范户快速坚实的看了看大家发快递了很费劲的开始放假',
            goodsParams: '四季度后付款的酸辣粉',
            price: 399,
            goodsCount: 1,
            singleGoodsMoney: 399
        }
    ]
    var deleteGoods = null
    loadGoods()

    function loadGoods() {
        $.each(goodsList, function (i, item) {
            var goodsHtml = '<div class="goods-item">' +
                '<div class="panel panel-default">' +
                '<div class="panel-body">' +
                '<div class="col-md-1 car-goods-info">' +
                '<label><input type="checkbox" class="goods-list-item"/></label>' +
                '</div>' +
                '<div class="col-md-2 car-goods-info goods-image-.........完整代码请登录后点击上方下载按钮下载查看