jQuery实现购物车demo

购物车分为几个模块：

      1，购买数量，要实现点击加减按钮操作数量

      2，小计金额，小计金额要单价与购买数量相乘，要先获取并更新购买数量，再获取单价

      3，总计金额，小计金额的和

      4，复选框，

                  1）点击全选时，所有单选框都被选上，

                  2）取消全选，所有单选框都不被选中，

                  3）有一个单选框没被选中全选按钮就不会被选中，

                  4）点击单选框时，该商品处于被选中状态下，此时商品小计金额才出现在总计金额             中并与原本总计金额中的值相加，取消单选框金额又恢复至yuan

                 

HTML结构

​
 <div id="shopcart">
        <div class="carttitle">
            <p><input type="checkbox" name="all" id="all">全选</p>
            <p>序号</p>
            <p>商品图片</p>
            <p>商品名称</p>
            <p>商品单价</p>
            <p>购买数量</p>
            <p>小计金额</p>
        </div>
        <div class="cartitem">
            <p><input type="checkbox" class="item"></p>
            <p>1</p>
            <p><img src="./images/惠普.jpg" alt=""></p>
            <p>惠普笔记本</p>
            <p class="price">5999.00</p>
            <p>
                <button class="sub">-</button>
                <input type="number" class="counter" value="0">
                <button class="add">+</button>
            </p>
            <p>￥<span class="sub-total">0.0</span></p>
        </div>
        <div class="cartitem">
            <p><input type="checkbox" class="item"></p>
            <p>2</p>
            <p><img src="./images/戴尔.jpg" alt=""></p>
            <p>戴尔笔记本</p>
            <p class="price">5500.00</p>
            <p>
                <button class="sub">-</button>
                <input type="number" class="counter" value="0">
                <button class="add">+</button>
            </p>
            <p>￥<span class="sub-total">0.0</span></p>
        </div>
        <div class="cartitem">
            <p><input type="checkbox" class="item"></p>
            <p>3</p>
            <p><img src="./images/华为.jpg" alt=""></p>
            <p>华为笔记本</p>
            <p class="price">6600.00</p>
            <p>
                <button class="sub">-</button>
                <input type="number" class="counter" value="0">
                <button class="add">+</button>
            </p>
            <p>￥<span class="sub-total">0.0</span></p>
        </div>
        <p>总计：￥<span id="total">0.0</span></p>
    </div>

​

css样式

  <style>
        * {
            margin: 0;
            padding: 0
        }

        html,
        body {
            background: #efefef;
        }

        #shopcart {
            background: white;
            width: 1000px;
            padding: 20px;
            border-radius: 5px;
            overflow: hidden;
            margin: 50px auto;
            box-shadow: #333 0 0 10px;
        }

        .carttitle {
            height: 50px;
            line-height: 50px;
            text-align: center;
            display: flex;
            justify-content: space-around;
            border-bottom: solid 2px #888;
        }

        .carttitle p {
            flex: auto;
        }

        .cartitem {
            height: 80px;
            border-bottom: dashed #666 1px;
            line-height: 80px;
            text-align: center;
            display: flex;
            justify-content: space-around;
        }

        .cartitem:last-of-type {
            border-bottom: solid 2px #888;
        }

        .cartitem p {
            flex: auto;
        }

        .cartitem p img {
            width: 50px;
            height: 50px;
            margin-top: 10px;
        }

        .cartitem p button {
            width: 25px;
            height: 25px;
        }

        .cartitem p input[type="number"] {
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .carttitle p:nth-of-type(1),
        .cartitem p:nth-of-type(1),
        .carttitle p:nth-of-type(2),
        .cartitem p:nth-of-type(2) {
            width: 30px;
        }

        .carttitle p:nth-of-type(3),
        .cartitem p:nth-of-type(3),
        .carttitle p:nth-of-type(4),
        .cartitem p:nth-of-type(4),
        .carttitle p:nth-of-type(5),
        .cartitem p:nth-of-type(5),
        .carttitle p:nth-of-type(6),
        .cartitem p:nth-of-type(6) {
            width: 90px;
        }

        .carttitle p:nth-of-type(7),
        .cartitem p:nth-of-type(7) {
            flex: 1;
        }

        #shopcart>p {
            float: right;
            font-size: 22px;
            line-height: 60px;
        }

        .cartitem p:nth-of-type(6) .counter {
            text-align: center;
        }
    </style>

jQuery代码，需要先引入jQuery库，下载链接在jQuery初识中

 <script>
        $(function () {
            // 选择框

            $("#all").click(function () {

                // 复选框

                if (this.checked) {
                    $(".item").prop("checked", true)
                    total()
                    
                } else {
                    $(".item").prop("checked", false)
                    total()

                }
             



            })
            $(".item").click(function () {
                total()
                var itemArr = Array.from($(".item"))

                var res = itemArr.every(function (it) {
                   

                    return it.checked
                   


                })
                $("#all").prop("checked", res)
               


            })




            // 点击增加按钮
            $(".add").click(function () {
                var index = $(".add").index(this)

                // 数据增加
                var $input = $(".counter").eq(index)
                var num = $input.val()
                $input.val(++num)


                // 获取单价
                var price = $(".price").eq(index).text()

                // 更改小计金额

                $(".sub-total").eq(index).text(num * price)
                total()

            })


            // 点击减少按钮
            $(".sub").click(function () {
                var index = $(".sub").index(this)

                // 数据减少
                var $input = $(".counter").eq(index)
                var num = $input.val()
                if (num > 0) {
                    $input.val(--num)
                } else {
                    num = 0
                }



                // 获取单价
                var price = $(".price").eq(index).text()

                // 更改小计金额

                $(".sub-total").eq(index).text(num * price)
                total()

            })



            // 封装总计函数
            function total() {
                var sum = 0
       
                $('.item').each(function (index, jsObj) {


                    if ($('.item')[index].checked) {

                     
                       sum =parseInt($('.sub-total')[index].innerHTML) +parseInt(sum)
                       
                    } 
                   
                })


                $("#total").text(sum)
              
            }
            total()
        })


    </script>

效果展示图如下