jQuery实现简单购物车页面
功能描述：
当全选按钮被按下时，所有商品的小复选框（以及另外一个全选按钮）的选中状态跟按下的全选按钮保持一致；
当用户选中商品时，如果所有商品都被选中，就让全选按钮为选中状态；
用户可以点击 + - 增加或减少商品数量，也可以直接在文本框修改数量，数量修改后 后边的小计也会相应改变；
用户可以进行删除操作，删除单个商品、选中商品以及清理购物车；
当用户进行操作时，下面的已选商品件数以及总额也会有相应变化
准备工作：
首先将css样式以及jq、js文件引入，jq文件要放在js文件上边
<link rel="stylesheet" href="css/car.css"> <script src="js/jquery.min.js"></script> <script src="js/car.js"></script>
HTML代码及CSS样式：
1 <body> 2 <div class="w"> 3 <div class="cart-warp"> 4 <!-- 头部全选模块 --> 5 <div class="cart-thead"> 6 <div class="t-checkbox"> 7 <input type="checkbox" name="" id="" class="checkall"> 全选 8 </div> 9 <div class="t-goods">商品</div> 10 <div class="t-price">单价</div> 11 <div class="t-num">数量</div> 12 <div class="t-sum">小计</div> 13 <div class="t-action">操作</div> 14 </div> 15 <!-- 商品详细模块 --> 16 <div class="cart-item-list"> 17 <div class="cart-item check-cart-item"> 18 <div class="p-checkbox"> 19 <input type="checkbox" name="" id="" checked class="j-checkbox"> 20 </div> 21 <div class="p-goods"> 22 <div class="p-img"> 23 <img src="img/p1.jpg" alt=""> 24 </div> 25 <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div> 26 </div> 27 <div class="p-price">￥12.60</div> 28 <div class="p-num"> 29 <div class="quantity-form"> 30 <a href="javascript:;" class="decrement">-</a> 31 <input type="text" class="itxt" value="1"> 32 <a href="javascript:;" class="increment">+</a> 33 </div> 34 </div> 35 <div class="p-sum">￥12.60</div> 36 <div class="p-action"><a href="javascript:;">删除</a></div> 37 </div> 38 <div class="cart-item"> 39 <div class="p-checkbox"> 40 <input type="checkbox" name="" id="" class="j-checkbox"> 41 </div> 42 <div class="p-goods"> 43 <div class="p-img"> 44 <img src="img/p2.jpg" alt=""> 45 </div> 46 <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div> 47 </div> 48 <div class="p-price">￥24.80</div> 49 <div class="p-num"> 50 <div class="quantity-form"> 51 <a href="javascript:;" class="decrement">-</a> 52 <input type="text" class="itxt" value="1"> 53 <a href="javascript:;" class="increment">+</a> 54 </div> 55 </div> 56 <div class="p-sum">￥24.80</div> 57 <div class="p-action"><a href="javascript:;">删除</a></div> 58 </div> 59 <div class="cart-item"> 60 <div class="p-checkbox"> 61 <input type="checkbox" name="" id="" class="j-checkbox"> 62 </div> 63 <div class="p-goods"> 64 <div class="p-img"> 65 <img src="img/p3.jpg" alt=""> 66 </div> 67 <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div> 68 </div> 69 <div class="p-price">￥29.80</div> 70 <div class="p-num"> 71 <div class="quantity-form"> 72 <a href="javascript:;" class="decrement">-</a> 73 <input type="text" class="itxt" value="1"> 74 <a href="javascript:;" class="increment">+</a> 75 </div> 76 </div> 77 <div class="p-sum">￥29.80</div> 78 <div class="p-action"><a href="javascript:;">删除</a></div> 79 </div> 80 </div> 81 <!-- 结算模块 --> 82 <div class="cart-floatbar"> 83 <div class="select-all"> 84 <input type="checkbox" name="" id="" class="checkall">全选 85 </div> 86 <div class="operation"> 87 <a href="javascript:;" class="remove-batch"> 删除选中的商品</a> 88 <a href="javascript:;" class="clear-all">清理购物车</a> 89 </div> 90 <div class="toolbar-right"> 91 <div class="amount-sum">已经选<em>1</em>件商品</div> 92 <div class="price-sum">总价： <em>￥12.60</em></div> 93 <div class="btn-area">去结算</div> 94 </div> 95 </div> <!-- cart-floatbar end --> 96 </div> <!-- cart-warp end --> 97 </div> <!-- w end --> 98 </body>
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 }
具体功能实现：
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 <= 1 ? n : n--; 4 $(this).siblings(".itxt").val(n); 5 // 小计模块 6 var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 7 // toFixed(2)保留两位小数 8 var price = (num * n).toFixed(2); 9 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 10 getSum(); 11 })
③直接修改文本框改变数量
1 $(".itxt").change(function() { 2 var n = $(this).val(); 3 var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 4 // toFixed(2)保留两位小数 5 var price = (num * n).toFixed(2); 6 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 7 getSum(); 8 })
4. 计算已选商品数及总额。封装成一个函数，页面加载完时应先调用一下，更新数据
声明变量来存储已选商品数以及总额，用each()遍历已选商品。
1 function getSum() { 2 var count = 0; 3 var money = 0; 4 // 只遍历选中的商品 each遍历，i为索引，ele为对象 5 $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) { 6 count += parseInt($(ele).val()); // 会有小误差，要取整一下 7 }) 8 $(".amount-sum em").text(count); 9 $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) { 10 money += parseFloat($(ele).text().substr(1)); 11 }) 12 $(".price-sum em").text("￥" + money.toFixed(2)); 13 }
5. 删除模块
1 // 删除单个商品 2 $(".p-action a").click(function() { 3 $(this).parents(".cart-item").remove(); 4 getSum(); 5 }) 6 // 删除选中商品 7 $(".remove-batch").click(function() { 8 $(".j-checkbox:checked").parents(".cart-item").remove(); 9 getSum(); 10 }) 11 // 清理购物车 12 $(".clear-all").click(function() { 13 $(".cart-item").remove(); 14 getSum(); 15 })
完整JS代码：
1 $(function() { 2 $(".checkall").change(function() { 3 // 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历） 4 $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked")); 5 getSum(); // 计算总额函数 6 // 添加背景 7 // 判断是否是选中状态，是的话添加check-cart-item类，没有就移除 8 if($(this).prop("checked")) { 9 $(".cart-item").addClass("check-cart-item"); 10 } else { 11 $(".cart-item").removeClass("check-cart-item"); 12 } 13 }) 14 $(".j-checkbox").change(function() { 15 if($(".j-checkbox:checked").length === $(".j-checkbox").length) { 16 $(".checkall").prop("checked", true); 17 } else { 18 $(".checkall").prop("checked", false); 19 } 20 getSum(); 21 // 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类） 22 if($(this).prop("checked")) { 23 $(this).parents(".cart-item").addClass("check-cart-item"); 24 } else { 25 $(this).parents(".cart-item").removeClass("check-cart-item"); 26 } 27 }) 28 29 // 点击+按钮，文本框数字加一 30 $(".increment").click(function() { 31 var n = $(this).siblings(".itxt").val(); 32 n++; 33 $(this).siblings(".itxt").val(n); 34 // 小计模块 35 // num为获取过来的单价，用substr()截取字符串把前边的￥去掉 36 var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 37 // toFixed(2)保留两位小数 38 var price = (num * n).toFixed(2); 39 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 40 getSum(); 41 }) 42 // 点击-按钮，文本框数字减一 43 $(".decrement").click(function() { 44 var n = $(this).siblings(".itxt").val(); 45 n <= 1 ? n : n--; 46 $(this).siblings(".itxt").val(n); 47 // 小计模块 48 var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 49 // toFixed(2)保留两位小数 50 var price = (num * n).toFixed(2); 51 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 52 getSum(); 53 }) 54 // 当用户直接修改文本框时 55 $(".itxt").change(function() { 56 var n = $(this).val(); 57 var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1); 58 // toFixed(2)保留两位小数 59 var price = (num * n).toFixed(2); 60 $(this).parents(".p-num").siblings(".p-sum").html("￥" + price); 61 getSum(); 62 }) 63 64 // 计算总额函数 65 getSum(); 66 function getSum() { 67 var count = 0; 68 var money = 0; 69 // 只遍历选中的商品 each遍历，i为索引，ele为对象 70 $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) { 71 count += parseInt($(ele).val()); // 会有小误差，要取整一下 72 }) 73 $(".amount-sum em").text(count); 74 $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) { 75 money += parseFloat($(ele).text().substr(1)); 76 }) 77 $(".price-sum em").text("￥" + money.toFixed(2)); 78 } 79 80 // 删除商品模块 81 // 删除单个商品 82 $(".p-action a").click(function() { 83 $(this).parents(".cart-item").remove(); 84 getSum(); 85 }) 86 // 删除选中商品 87 $(".remove-batch").click(function() { 88 $(".j-checkbox:checked").parents(".cart-item").remove(); 89 getSum(); 90 }) 91 // 清理购物车 92 $(".clear-all").click(function() { 93 $(".cart-item").remove(); 94 getSum(); 95 }) 96 })
具体代码点击→https://github.com/sunyan1998/Some-demos （觉得不错右上角顺手点个☆star哦~感谢O(∩_∩)O~）
里面有很多CSS3/JS/jQuery小例子哦，包括各种轮播图、电梯导航、封装的动画函数、todolist、登录模态框（可拖动）、购物车、点击换肤、密码显示隐藏、各种布局（bootstrap-flex-rem）等等......
