jQuery实现简单购物车页面 |
您所在的位置：网站首页 › html做购物车统计 › jQuery实现简单购物车页面 |
jQuery实现简单购物车页面
|
功能描述： 当全选按钮被按下时，所有商品的小复选框（以及另外一个全选按钮）的选中状态跟按下的全选按钮保持一致； 当用户选中商品时，如果所有商品都被选中，就让全选按钮为选中状态； 用户可以点击 + - 增加或减少商品数量，也可以直接在文本框修改数量，数量修改后 后边的小计也会相应改变； 用户可以进行删除操作，删除单个商品、选中商品以及清理购物车； 当用户进行操作时，下面的已选商品件数以及总额也会有相应变化 准备工作： 首先将css样式以及jq、js文件引入，jq文件要放在js文件上边 HTML代码及CSS样式：  
1
2
3
4
5
6
7 全选
8
9 商品
10 单价
11 数量
12 小计
13 操作
14
15
16
17
18
19
20
21
22
23
24
25 【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
26
27 ￥12.60
28
29
30 -
31
32 +
33
34
35 ￥12.60
36 删除
37
38
39
40
41
42
43
44
45
46 【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽
47
48 ￥24.80
49
50
51 -
52
53 +
54
55
56 ￥24.80
57 删除
58
59
60
61
62
63
64
65
66
67 唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍
68
69 ￥29.80
70
71
72 -
73
74 +
75
76
77 ￥29.80
78 删除
79
80
81
82
83
84 全选
85
86
87 删除选中的商品
88 清理购物车
89
90
91 已经选1件商品
92 总价： ￥12.60
93 去结算
94
95
96
97
98
car.html
1 * {
2 margin: 0;
3 padding: 0
4 }
5 em,
6 i {
7 font-style: normal;
8 }
9 li {
10 list-style: none;
11 }
12 a {
13 color: #666;
14 text-decoration: none;
15 }
16 a:hover {
17 color: #e33333;
18 }
19 body {
20 font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
21 color: #666
22 }
23 .w {
24 width: 1200px;
25 margin: 0 auto;
26 }
27 .cart-thead {
28 height: 32px;
29 line-height: 32px;
30 margin: 5px 0 10px;
31 padding: 5px 0;
32 background: #f3f3f3;
33 border: 1px solid #e9e9e9;
34 border-top: 0;
35 position: relative;
36 }
37 .cart-thead>div,
38 .cart-item>div {
39 float: left;
40 }
41 .t-checkbox,
42 .p-checkbox {
43 height: 18px;
44 line-height: 18px;
45 padding-top: 7px;
46 width: 122px;
47 padding-left: 11px;
48 }
49 .t-goods {
50 width: 400px;
51 }
52 .t-price {
53 width: 120px;
54 padding-right: 40px;
55 text-align: right;
56 }
57 .t-num {
58 width: 150px;
59 text-align: center;
60 }
61 .t-sum {
62 width: 100px;
63 text-align: right;
64 }
65 .t-action {
66 width: 130px;
67 text-align: right;
68 }
69 .cart-item {
70 height: 160px;
71 border-style: solid;
72 border-width: 2px 1px 1px;
73 border-color: #aaa #f1f1f1 #f1f1f1;
74 background: #fff;
75 padding-top: 14px;
76 margin: 15px 0;
77 }
78 .check-cart-item {
79 background: #fff4e8;
80 }
81 .p-checkbox {
82 width: 50px;
83 }
84 .p-goods {
85 margin-top: 8px;
86 width: 565px;
87 }
88 .p-img {
89 float: left;
90 border: 1px solid #ccc;
91 padding: 5px;
92 }
93 .p-msg {
94 float: left;
95 width: 210px;
96 margin: 0 10px;
97 }
98 .p-price {
99 width: 110px;
100 }
101 .quantity-form {
102 width: 80px;
103 height: 22px;
104 }
105 .p-num {
106 width: 170px;
107 }
108 .decrement,
109 .increment {
110 float: left;
111 border: 1px solid #cacbcb;
112 height: 18px;
113 line-height: 18px;
114 padding: 1px 0;
115 width: 16px;
116 text-align: center;
117 color: #666;
118 background: #fff;
119 margin-left: -1px;
120 }
121 .itxt {
122 float: left;
123 border: 1px solid #cacbcb;
124 width: 42px;
125 height: 18px;
126 line-height: 18px;
127 text-align: center;
128 padding: 1px;
129 margin-left: -1px;
130 font-size: 12px;
131 font-family: verdana;
132 color: #333;
133 -webkit-appearance: none;
134 }
135 .p-sum {
136 font-weight: 700;
137 width: 145px;
138 }
139 .cart-floatbar {
140 height: 50px;
141 border: 1px solid #f0f0f0;
142 background: #fff;
143 position: relative;
144 margin-bottom: 50px;
145 line-height: 50px;
146 }
147 .select-all {
148 float: left;
149 height: 18px;
150 line-height: 18px;
151 padding: 16px 0 16px 9px;
152 white-space: nowrap;
153 }
154 .select-all input {
155 vertical-align: middle;
156 display: inline-block;
157 margin-right: 5px;
158 }
159 .operation {
160 float: left;
161 width: 200px;
162 margin-left: 40px;
163 }
164 .clear-all {
165 font-weight: 700;
166 margin: 0 20px;
167 }
168 .toolbar-right {
169 float: right;
170 }
171 .amount-sum {
172 float: left;
173 }
174 .amount-sum em {
175 font-weight: 700;
176 color: #E2231A;
177 padding: 0 3px;
178 }
179 .price-sum {
180 float: left;
181 margin: 0 15px;
182 }
183 .price-sum em {
184 font-size: 16px;
185 color: #E2231A;
186 font-weight: 700;
187 }
188 .btn-area {
189 font-weight: 700;
190 width: 94px;
191 height: 52px;
192 line-height: 52px;
193 color: #fff;
194 text-align: center;
195 font-size: 18px;
196 font-family: "Microsoft YaHei";
197 background: #e54346;
198 overflow: hidden;
199 }
car.css
具体功能实现： 1. 当全选按钮改变时，让小复选框按钮和全选按钮保持一致。 全选按钮被选中时，让所有商品背景色改变，反之则去掉背景色，同时也要改变已选商品件数和总额 1 $(".checkall").change(function() { 2 // 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历） 3 $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); 4 getSum(); // 计算总额函数 5 // 添加背景 6 // 判断是否是选中状态，是的话添加check-cart-item类，没有就移除 7 if($(this).prop("checked")) { 8 $(".cart-item").addClass("check-cart-item"); 9 } else { 10 $(".cart-item").removeClass("check-cart-item"); 11 } 12 })2. 当小复选框按钮改变时，判断是否所有的小按钮都是选中状态，是的话让全选按钮为选中状态，否则为未选中状态。 通过已选复选框的个数是否等于所有小复选框的总个数来判断，同时也要改变背景色和总额模块 1 $(".j-checkbox").change(function() { 2 if($(".j-checkbox:checked").length === $(".j-checkbox").length) { 3 $(".checkall").prop("checked", true); 4 } else { 5 $(".checkall").prop("checked", false); 6 } 7 getSum(); 8 // 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类） 9 if($(this).prop("checked")) { 10 $(this).parents(".cart-item").addClass("check-cart-item"); 11 } else { 12 $(this).parents(".cart-item").removeClass("check-cart-item"); 13 } 14 })3. 用户可以通过点击加减号或者直接修改文本框来修改商品数量，后边的小计也做相应的变化 ①点击+按钮，文本框数字加一，小计加价。 先把原来的数量获取过来，然后在原来的基础上加一再赋给文本框；把单价获取过来，乘以文本框数量就是小计 1 $(".increment").click(function() { 2 var n = $(this).siblings(".itxt").val(); 3 n++; 4 $(this).siblings(".itxt").val(n); 5 // 小计模块 6 // num为获取过来的单价，用substr()截取字符串把前边的￥去掉 7 var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 8 // toFixed(2)保留两位小数 9 var price = (num * n).toFixed(2); 10 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 11 getSum(); 12 })②点击-按钮，文本框数字减一，小计减价。 具体方法同上，有一点不一样是商品数量不能小于1，要判断一下 1 $(".decrement").click(function() { 2 var n = $(this).siblings(".itxt").val(); 3 n |
【本文地址】