JQuery实现商城购物车基本功能

html部分

    <div class="w">
      <div class='carTop w'>
          <ul>
              <li class="checkall"><input type="checkbox" class="j-checkall">全选</li>
                <li class="top1">商品名称</li>
                <li class="top2">单价</li>
                <li class="top3">数量</li>
                <li class="top4">小计</li>
                <li class="top5">操作</li>
            </ul>
        </div>
        <div class="info w ">
            <ul>
                <li class="car-check"><input type="checkbox" class="j-check"></li>
                <li class="car-img"><img src="https://img11.360buyimg.com/n2/jfs/t1/132723/23/9020/82068/5f4f3b5cE54563bf4/dc0dfddc7dc85459.jpg!q80.webp" /></li>
                <li class="car-name"><a href="">TheNorthFace北面2020秋冬情侣款户外</a></li>

                <li class="car-price">￥<span>182.50</span></li>
                <li class="car-num">
                    <a href="javascript:" class="btn sub" role="button"></a>
                    <input class="inputNum" value="1" size="1">
                    <a href="javascript:" class="btn add" role="button"></a>
                </li>
                <li class="car-price-total">￥<span>182.50</span></li>
                <li class="car-action">
                    <a href="javascript:;" class="j-action">删除</a>

                </li>
            </ul>
        </div>
        <div class="info w ">
            <ul>
                <li class="car-check"><input type="checkbox" class="j-check"></li>
                <li class="car-img"><img src="https://img11.360buyimg.com/n2/jfs/t1/132723/23/9020/82068/5f4f3b5cE54563bf4/dc0dfddc7dc85459.jpg!q80.webp" /></li>
                <li class="car-name"><a href="">TheNorthFace北面2020秋冬情侣款户外</a></li>

                <li class="car-price">￥<span>339.00</span></li>
                <li class="car-num">
                    <a href="javascript:" class="btn sub" role="button"></a>
                    <input class="inputNum" value="1" size="1">
                    <a href="javascript:" class="btn add" role="button"></a>
                </li>
                <li class="car-price-total">￥<span>339.00</span></li>
                <li class="car-action">
                    <a href="javascript:;" class="j-action">删除</a>

                </li>
            </ul>
        </div>
        <div class="info w ">
            <ul>
                <li class="car-check"><input type="checkbox" class="j-check"></li>
                <li class="car-img"><img src="https://img12.360buyimg.com/n2/jfs/t1/133459/13/9772/102396/5f5e4d51E1fbc0514/1b4d18d8053548c9.jpg!q80.webp" /></li>
                <li class="car-name"><a href="">圣罗兰（YSL）唇釉416#（黑管唇釉）</a></li>

                <li class="car-price">￥<span>335.00</span></li>
                <li class="car-num">
                    <a href="javascript:" class="btn sub" role="button"></a>
                    <input class="inputNum" value="1" size="1">
                    <a href="javascript:" class="btn add" role="button"></a>
                </li>
                <li class="car-price-total">￥<span>335.00</span></li>
                <li class="car-action">
                    <a href="javascript:;" class="j-action">删除</a>

                </li>
            </ul>
        </div>
        <div class="carBottom">
            <ul>
                <li class="checkall"><input type="checkbox" class="j-checkall">全选</li>
                <li class="clear"><a href="javascript:;">删除选中</a></li>
                <li class="clearAll"><a href="javascript:;">清空购物车</a></li>
                <li class="totalPrice">总价<em>0.00</em>元</li>
                <li class="car-total-num">一共选择了<span>0</span>件商品</li>


            </ul>
        </div>
    </div>

css部分

* {
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit
}

li {
    list-style: none;
}

.inputNum {
    vertical-align: middle;
    height: 22px;
    border: 1px solid #d0d0d0;
    text-align: center;
}

.btn {
    display: inline-block;
    vertical-align: middle;
    background: #f0f0f0 no-repeat center;
    border: 1px solid #d0d0d0;
    width: 24px;
    height: 24px;
    border-radius: 2px;
    box-shadow: 0 1px rgba(100, 100, 100, .1);
    color: #666;
    transition: color .2s, background-color .2s;
}

.btn:active {
    box-shadow: inset 0 1px rgba(100, 100, 100, .1);
}

.btn:hover {
    background-color: #e9e9e9;
    color: #333;
}

.add {
    background-image: linear-gradient(to top, currentColor, currentColor), linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px, 2px 10px;
}

.sub {
    background-image: linear-gradient(to top, currentColor, currentColor);
    background-size: 10px 2px;
}

.w {
    width: 1000px;
    margin: 0px auto;
    background-color: rgb(238, 235, 235);
}

.carTop {
    height: 50px;
}

.carTop li,
.carBottom li {
    float: left;
    border-bottom: 1px solid grey;
    text-align: center;
    margin: 0 10px;
    line-height: 50px;
}

.carBottom {
    height: 50px;
    border-bottom: 1px solid grey;
}

.carBottom li {
    border: 0;
}

.checkall {
    width: 120px;
}

.top1 {
    width: 300px;
}

.top2,
.top4,
.top5 {
    width: 100px;
}

.top3 {
    width: 150px;
}

.info {
    width: 1000px;
    height: 95px;
    background-color: #fff;
    border-bottom: 1px solid gray;
}

.info li {
    float: left;
    margin-top: 20px;
}

.car-check {
    margin-left: 50px;
}

.car-img,
.car-price {
    margin-left: 85px;
}

.car-img img {
    width: 50px;
    height: 50px;
}

.car-name {
    width: 200px;
    height: 20px;
}

.car-price-total,
.car-num {
    margin-left: 65px;
}

.car-action {
    margin-left: 80px;
}

.info a {
    font-size: 12px;
    color: #333333;
}

.clear,
.clearAll {
    font-size: 12px;
    margin: left 20px;
    ;
}

.carBottom .car-total-num,
.carBottom .totalPrice {
    float: right;
    margin-right: 80px;
    color: rgb(243, 158, 30);
    font-weight: 700;
}

.car-total-num span,
.totalPrice em {
    margin: 0 3px;
    color: #e2231a
}

.current {
    background-color: #fff4e8;
}

JQuery部分

$(function() {
    // 全选框

    $(".j-checkall ").change(function() {

            $(".j-check,.j-checkall ").prop("checked", $(this).prop("checked"))
            if ($(".j-check").prop("checked")) {
                $(".j-check").parents(".info").addClass("current");
            } else {
                $(".j-check").parents(".info").removeClass("current");
            }


            numSum();
            Price()
        })
        // 单选框
    $(".j-check").change(function() {

            if ($(this).prop("checked")) {
                $(this).parents(".info").addClass("current");
            } else {
                $(this).parents(".info").removeClass("current");
            }

            // console.log($(".check:checked").length);
            if ($(".j-check:checked").length === $(".j-check").length) {
                $(".j-checkall").prop("checked", true)
            } else {
                $(".j-checkall").prop("checked", false)
            }
            numSum();
            Price()
        })
        // 文本框输入


    $(".inputNum").change(function() {

        var n = parseInt($(this).val())
        var p = $(this).parent().siblings(".car-price").children("span").text()
        if (n <= 0 || isNaN(n)) {

            $(this).val("1")
            n = 1
        }
        $(this).parent().siblings(".car-price-total").children("span").text(parseInt(p * n))
        numSum()
        Price()
    })

    // 加按钮
    $(".add").click(function() {

            var n = $(this).siblings("input").val()
            n++
            $(this).siblings(".inputNum").val(n)
            var p = $(this).parent().siblings(".car-price").children("span").text()


            // console.log(p);
            $(this).parent().siblings(".car-price-total").children("span").text((p * n).toFixed(2))
            numSum();
            Price()
        })
        // 减按钮
    $(".sub").click(function() {

        var n = $(this).siblings("input").val()

        if (n <= 1) {
            return false
        }
        n--;
        $(this).siblings(".inputNum").val(n)
        var p = $(this).parent().siblings(".car-price").children("span").text()

        // console.log(p);
        $(this).parent().siblings(".car-price-total").children("span").text((p * n).toFixed(2))
        numSum();
        Price()
    })

    // 删除单个  
    $(".j-action").click(function() {

            $(this).parents(".info").remove()
            numSum();
            Price()
        })
        // 删除选中
    $(".clear").click(function() {

            $(".j-check:checked").parents(".info").remove();
            numSum();
            Price()
        })
        // 清空购物车
    $(".clearAll").click(function() {

        $(this).parents().siblings(".info").remove()
        numSum();
        Price()
    })


    function numSum() {
        var num = 0
        $(".j-check").each(function() {
            if (this.checked == true) {
                var a = $(this).parent().siblings(".car-num").children(".inputNum").val();
                num += Number(a);
            }
        });
        $('.car-total-num').children("span").text((num));
        // console.log(num);
    }


    function Price() {
        var sum = 0;
        $(".j-check").each(function() {
            if (this.checked == true) {
                var a = $(this).parent().siblings(".car-price-total").children("span").text();
                sum += Number(a);
            }
        });
        $('.totalPrice').children("em").text((sum).toFixed(2));
        // console.log(sum);
    }

})