用jQuery购物车结算

HTML：

1.  
   <div class="pro-main">
2.  
   <div class="cart-info">
3.  
   <div class="all"><input type="checkbox" class="allCheck">全选</div>
4.  
   <div class="pro-info">商品信息</div>
5.  
   <div class="dj-price">单价</div>
6.  
   <div class="num-pro">数量</div>
7.  
   <div class="zj-price">金额</div>
8.  
   <div class="cz">操作</div>
9.  
   </div>
10.  
    <div class="cart-main">
11.  
    <div class="cart-item">
12.  
    <div class="cart-j fl">
13.  
    <input type="checkbox" class="j-check">
14.  
    </div>
15.  
    <div class="pro-item fl">
16.  
    <div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
17.  
    <div class="pro-title fl">西部数据(WD)蓝盘 1TB</div>
18.  
    <div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
19.  
    </div>
20.  
    <div class="price-g fl">￥28.60</div>
21.  
    <div class="price-num fl">
22.  
    <a href="javascript:;" class="increment"> </a>
23.  
    <input type="text" value="1" class="num">
24.  
    <a href="javascript:;" class="decrement">-</a>
25.  
    </div>
26.  
    <div class="price-jiner fl">￥28.60</div>
27.  
    <div class="price-caozuo fl"><a href="javascript:;" class="del-d">删除</a></div>
28.  
    </div>
29.  
    <div class="cart-item">
30.  
    <div class="cart-j fl">
31.  
    <input type="checkbox" class="j-check">
32.  
    </div>
33.  
    <div class="pro-item fl">
34.  
    <div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
35.  
    <div class="pro-title fl">西部数据(WD)蓝盘 1TB</div>
36.  
    <div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
37.  
    </div>
38.  
    <div class="price-g fl">￥28.60</div>
39.  
    <div class="price-num fl">
40.  
    <a href="javascript:;" class="increment"> </a>
41.  
    <input type="text" value="1" class="num">
42.  
    <a href="javascript:;" class="decrement">-</a>
43.  
    </div>
44.  
    <div class="price-jiner fl">￥28.60</div>
45.  
    <div class="price-caozuo fl"><a href="javascript:;" class="del-d">删除</a></div>
46.  
    </div>
47.  
    <div class="cart-item">
48.  
    <div class="cart-j fl">
49.  
    <input type="checkbox" class="j-check">
50.  
    </div>
51.  
    <div class="pro-item fl">
52.  
    <div class="pro-img fl"><img src="https://www.jq22.com/img/cs/500x500-1.png" alt=""></div>
53.  
    <div class="pro-title fl">西部数据(WD)蓝盘 1TB</div>
54.  
    <div class="pro-gg fl">SATA6Gb/s 7200转64MB 台式机械硬盘(WD10EZEX)</div>
55.  
    </div>
56.  
    <div class="price-g fl">￥28.60</div>
57.  
    <div class="price-num fl">
58.  
    <a href="javascript:;" class="increment"> </a>
59.  
    <input type="text" value="1" class="num">
60.  
    <a href="javascript:;" class="decrement">-</a>
61.  
    </div>
62.  
    <div class="price-jiner fl">￥28.60</div>
63.  
    <div class="price-caozuo fl"><a href="javascript:;" class="del-d">删除</a></div>
64.  
    </div>
65.  
    </div>
66.  
    <div class="cart-info">
67.  
    <div class="all fl"><input type="checkbox" class="allCheck">全选</div>
68.  
    <div class="fl">
69.  
    <a href="javascirpt:;" class="clearAll">删除</a>
70.  
    <a href="javascirpt:;" class="All-a">清除购物车的宝贝</a>
71.  
    </div>
72.  
    <div class="fr" style="width: 500px;">
73.  
    <div class="spnum fl">
74.  
    已选商品<em>0</em>件
75.  
    </div>
76.  
    <div class="priceAll fl">合计（不含运费）: <span>0.00</span></div>
77.  
    <div class="jiesuan fr"><a href="#" class="js-btn">结算</a></div>
78.  
    </div>
79.  
    </div>
80.  
    </div>

css:

1.  
   * {
2.  
   margin:0;
3.  
   padding:0;
4.  
   }
5.  
   body {
6.  
   font-size:13px;
7.  
   }
8.  
   input {
9.  
   vertical-align:middle;
10.  
    }
11.  
    a {
12.  
    text-decoration:none;
13.  
    color:#333333;
14.  
    }
15.  
    .fl {
16.  
    float:left;
17.  
    }
18.  
    .fr {
19.  
    float:right;
20.  
    }
21.  
    .pro-main {
22.  
    width:1000px;
23.  
    margin:100px auto;
24.  
    }
25.  
    .cart-info .all,.cart-info .pro-info,.cart-info .dj-price,.cart-info .num-pro,.cart-info .zj-price,.cart-info .cz {
26.  
    float:left;
27.  
    }
28.  
    .cart-info {
29.  
    height:40px;
30.  
    line-height:40px;
31.  
    background-color:#EFEFEF;
32.  
    }
33.  
    .cart-info .all {
34.  
    width:80px;
35.  
    padding:0px 15px;
36.  
    }
37.  
    .cart-info .all input {
38.  
    margin-right:8px;
39.  
    }
40.  
    .cart-info .pro-info {
41.  
    width:500px;
42.  
    }
43.  
    .cart-info .dj-price {
44.  
    width:80px;
45.  
    }
46.  
    .cart-info .num-pro {
47.  
    width:120px;
48.  
    }
49.  
    .cart-info .zj-price {
50.  
    width:110px;
51.  
    }
52.  
    .cart-info .cz {
53.  
    width:80px;
54.  
    }
55.  
    .cart-main {
56.  
    margin-top:15px;
57.  
    }
58.  
    .cart-item {
59.  
    border:1px solid #EFEFEF;
60.  
    padding:15px;
61.  
    overflow:hidden;
62.  
    margin-bottom:15px;
63.  
    }
64.  
    .cart-j {
65.  
    width:30px;
66.  
    }
67.  
    .pro-item {
68.  
    width:560px;
69.  
    }
70.  
    .pro-item .pro-img {
71.  
    width:80px;
72.  
    height:80px;
73.  
    }
74.  
    .pro-item .pro-title {
75.  
    width:225px;
76.  
    line-height:1.8;
77.  
    padding:0px 15px;
78.  
    }
79.  
    .pro-item .pro-gg {
80.  
    width:185px;
81.  
    padding:0px 15px;
82.  
    font-size:10px;
83.  
    color:#666;
84.  
    }
85.  
    .price-g {
86.  
    width:80px;
87.  
    color:black;
88.  
    font-weight:bold;
89.  
    }
90.  
    .price-num {
91.  
    width:95px;
92.  
    margin-right:30px;
93.  
    background-color:#EFEFEF;
94.  
    /* border:1px solid #EFEFEF;
95.  
    */
96.  
    }
97.  
    .price-num .increment,.price-num .decrement {
98.  
    width:20px;
99.  
    float:left;
100.  
     text-align:center;
101.  
     }
102.  
     .price-num .num {
103.  
     float:left;
104.  
     width:50px;
105.  
     text-align:center;
106.  
     }
107.  
     .price-jiner {
108.  
     width:110px;
109.  
     color:red;
110.  
     font-weight:bold;
111.  
     }
112.  
     .price-caozuo {
113.  
     width:40px;
114.  
     }
115.  
     .priceAll {
116.  
     margin:0px 20px;
117.  
     }
118.  
     .priceAll span {
119.  
     padding:0px 8px;
120.  
     color:#f22d00;
121.  
     font-weight:bold;
122.  
     font-size:15px;
123.  
     }
124.  
     .spnum em {
125.  
     font-style:normal;
126.  
     padding:0px 8px;
127.  
     color:#f22d00;
128.  
     font-weight:bold;
129.  
     font-size:15px;
130.  
     }
131.  
     .js-btn {
132.  
     display:block;
133.  
     width:100px;
134.  
     text-align:center;
135.  
     background-color:#f22d00;
136.  
     color:white;
137.  
     }
138.  
     .pro-item img {
139.  
     width:80px;
140.  
     }

js:

$(function() {
    // 1、全选  全不选
    $('.allCheck').change(function() {
        if ($(this).prop('checked')) {
            $('.j-check,.allCheck').prop('checked', true);
            getSum();
        } else {
            $('.j-check,.allCheck').prop('checked', false);
            $('.spnum em').text(0);
            $('.priceAll span').text(0.00);
        }

    });
    // 2、下面的小复选框
    $('.j-check').change(function() {
        // 小复选框全部选中，则全选选中
        if ($('.j-check:checked').length === $('.j-check').length) {
            $('.allCheck').prop('checked', true);
        } else {
            $('.allCheck').prop('checked', false);
        }
        // 商品数量
        getSum();
    });
    // 3、商品数量增加
    $('.increment').click(function() {
        var n = $(this).siblings('.num').val();
        n ;
        $(this).siblings('.num').val(n);
        // 商品金额 跟随 商品数量变化  金额 = 商品数量 * 商品单价
        var p = $(this).parent('.price-num').siblings('.price-g').text();
        p = p.substr(1);
        $(this).parent('.price-num').siblings('.price-jiner').text('￥' (n * p).toFixed(2));
        getSum();

    });
    // 4、商品数量减少
    $('.decrement').click(function() {
        var n = $(this).siblings('.num').val();
        n--;
        if (n <= 1) {
            n = 1;
        }
        $(this).siblings('.num').val(n);
        // 商品金额 跟随 商品数量变化
        var p = $(this).parent('.price-num').siblings('.price-g').text();
        p = p.substr(1);
        $(this).parent('.price-num').siblings('.price-jiner').text('￥' (n * p).toFixed(2));
    });
    // 5、修改数量
    $('.num').change(function() {
        var n = $(this).val();
        var p = $(this).parent('.price-num').siblings('.price-g').text().substr(1);
        $(this).parent('.price-num').siblings('.price-jiner').text('￥' (n * p).toFixed(2));
        getSum();
    });
    // 5、删除
    // （1）删除当前商品
    $('.del-d').click(function() {
        $(this).parents('.cart-item').remove();
        getSum();
    });
    // （2）删除选中的商品
    $('.clearAll').click(function() {
        $('.j-check:checked').parents('.cart-item').remove();
        getSum();
    });
    // (3) 删除所有的商品
    $('.All-a').click(function() {
        $('.cart-item').remove();
        getSum();
    })
    // 
    // 商品价格
    getSum();

    function getSum() {
        // 总数量
        var num = 0;
        // 总价
        var money = 0;
        // 遍历
        $('.num').each(function(i, ele) {
            if ($(this).parent('.price-num').siblings('.cart-j').find('.j-check').prop('checked')) {
                num = parseInt($(ele).val());
                $('.spnum em').text(num);
            }
        });
        $('.price-jiner').each(function(i, ele) {
            if ($(this).siblings('.cart-j').find('.j-check').prop('checked')) {
                money = parseFloat($(ele).text().substr(1));
                $('.priceAll span').text(money.toFixed(2));
            }
        })

    }
})

实现效果：

这篇好文章是转载于：学新通技术网