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样式：

 <body>

     <div class="w">

         <div class="cart-warp">

             <!-- 头部全选模块 -->

             <div class="cart-thead">

                 <div class="t-checkbox">

                     <input type="checkbox" name="" id="" class="checkall"> 全选

                 </div>

                 <div class="t-goods">商品</div>

                 <div class="t-price">单价</div>

                 <div class="t-num">数量</div>

                 <div class="t-sum">小计</div>

                 <div class="t-action">操作</div>

             </div>

             <!-- 商品详细模块 -->

             <div class="cart-item-list">

                 <div class="cart-item check-cart-item">

                     <div class="p-checkbox">

                         <input type="checkbox" name="" id="" checked class="j-checkbox">

                     </div>

                     <div class="p-goods">

                         <div class="p-img">

                             <img src="img/p1.jpg" alt="">

                         </div>

                         <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>

                     </div>

                     <div class="p-price">￥12.60</div>

                     <div class="p-num">

                         <div class="quantity-form">

                             <a href="javascript:;" class="decrement">-</a>

                             <input type="text" class="itxt" value="1">

                             <a href="javascript:;" class="increment">+</a>

                         </div>

                     </div>

                     <div class="p-sum">￥12.60</div>

                     <div class="p-action"><a href="javascript:;">删除</a></div>

                 </div>

                 <div class="cart-item">

                     <div class="p-checkbox">

                         <input type="checkbox" name="" id="" class="j-checkbox">

                     </div>

                     <div class="p-goods">

                         <div class="p-img">

                             <img src="img/p2.jpg" alt="">

                         </div>

                         <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>

                     </div>

                     <div class="p-price">￥24.80</div>

                     <div class="p-num">

                         <div class="quantity-form">

                             <a href="javascript:;" class="decrement">-</a>

                             <input type="text" class="itxt" value="1">

                             <a href="javascript:;" class="increment">+</a>

                         </div>

                     </div>

                     <div class="p-sum">￥24.80</div>

                     <div class="p-action"><a href="javascript:;">删除</a></div>

                 </div>

                 <div class="cart-item">

                     <div class="p-checkbox">

                         <input type="checkbox" name="" id="" class="j-checkbox">

                     </div>

                     <div class="p-goods">

                         <div class="p-img">

                             <img src="img/p3.jpg" alt="">

                         </div>

                         <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>

                     </div>

                     <div class="p-price">￥29.80</div>

                     <div class="p-num">

                         <div class="quantity-form">

                             <a href="javascript:;" class="decrement">-</a>

                             <input type="text" class="itxt" value="1">

                             <a href="javascript:;" class="increment">+</a>

                         </div>

                     </div>

                     <div class="p-sum">￥29.80</div>

                     <div class="p-action"><a href="javascript:;">删除</a></div>

                 </div>

             </div>

             <!-- 结算模块 -->

             <div class="cart-floatbar">

                 <div class="select-all">

                     <input type="checkbox" name="" id="" class="checkall">全选

                 </div>

                 <div class="operation">

                     <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>

                     <a href="javascript:;" class="clear-all">清理购物车</a>

                 </div>

                 <div class="toolbar-right">

                     <div class="amount-sum">已经选<em>1</em>件商品</div>

                     <div class="price-sum">总价： <em>￥12.60</em></div>

                     <div class="btn-area">去结算</div>

                 </div>

             </div>  <!-- cart-floatbar end -->

         </div>  <!-- cart-warp end -->

     </div>  <!-- w end -->

 </body>

car.html

 * {

     margin:;

     padding: 0

 }

 em,

 i {

     font-style: normal;

 }

 li {

     list-style: none;

 }

 a {

     color: #666;

     text-decoration: none;

 }

 a:hover {

     color: #e33333;

 }

 body {

     font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;

     color: #666

 }

 .w {

     width: 1200px;

     margin: 0 auto;

 }

 .cart-thead {

     height: 32px;

     line-height: 32px;

     margin: 5px 0 10px;

     padding: 5px 0;

     background: #f3f3f3;

     border: 1px solid #e9e9e9;

     border-top:;

     position: relative;

 }

 .cart-thead>div,

 .cart-item>div {

     float: left;

 }

 .t-checkbox,

 .p-checkbox {

     height: 18px;

     line-height: 18px;

     padding-top: 7px;

     width: 122px;

     padding-left: 11px;

 }

 .t-goods {

     width: 400px;

 }

 .t-price {

     width: 120px;

     padding-right: 40px;

     text-align: right;

 }

 .t-num {

     width: 150px;

     text-align: center;

 }

 .t-sum {

     width: 100px;

     text-align: right;

 }

 .t-action {

     width: 130px;

     text-align: right;

 }

 .cart-item {

     height: 160px;

     border-style: solid;

     border-width: 2px 1px 1px;

     border-color: #aaa #f1f1f1 #f1f1f1;

     background: #fff;

     padding-top: 14px;

     margin: 15px 0;

 }

 .check-cart-item {

     background: #fff4e8;

 }

 .p-checkbox {

     width: 50px;

 }

 .p-goods {

     margin-top: 8px;

     width: 565px;

 }

 .p-img {

     float: left;

     border: 1px solid #ccc;

     padding: 5px;

 }

 .p-msg {

     float: left;

     width: 210px;

     margin: 0 10px;

 }

 .p-price {

     width: 110px;

 }

 .quantity-form {

     width: 80px;

     height: 22px;

 }

 .p-num {

     width: 170px;

 }

 .decrement,

 .increment {

     float: left;

     border: 1px solid #cacbcb;

     height: 18px;

     line-height: 18px;

     padding: 1px 0;

     width: 16px;

     text-align: center;

     color: #666;

     background: #fff;

     margin-left: -1px;

 }

 .itxt {

     float: left;

     border: 1px solid #cacbcb;

     width: 42px;

     height: 18px;

     line-height: 18px;

     text-align: center;

     padding: 1px;

     margin-left: -1px;

     font-size: 12px;

     font-family: verdana;

     color: #333;

     -webkit-appearance: none;

 }

 .p-sum {

     font-weight:;

     width: 145px;

 }

 .cart-floatbar {

     height: 50px;

     border: 1px solid #f0f0f0;

     background: #fff;

     position: relative;

     margin-bottom: 50px;

     line-height: 50px;

 }

 .select-all {

     float: left;

     height: 18px;

     line-height: 18px;

     padding: 16px 0 16px 9px;

     white-space: nowrap;

 }

 .select-all input {

     vertical-align: middle;

     display: inline-block;

     margin-right: 5px;

 }

 .operation {

     float: left;

     width: 200px;

     margin-left: 40px;

 }

 .clear-all {

     font-weight:;

     margin: 0 20px;

 }

 .toolbar-right {

     float: right;

 }

 .amount-sum {

     float: left;

 }

 .amount-sum em {

     font-weight:;

     color: #E2231A;

     padding: 0 3px;

 }

 .price-sum {

     float: left;

     margin: 0 15px;

 }

 .price-sum em {

     font-size: 16px;

     color: #E2231A;

     font-weight:;

 }

 .btn-area {

     font-weight:;

     width: 94px;

     height: 52px;

     line-height: 52px;

     color: #fff;

     text-align: center;

     font-size: 18px;

     font-family: "Microsoft YaHei";

     background: #e54346;

     overflow: hidden;

 }

car.css

具体功能实现：

1. 当全选按钮改变时，让小复选框按钮和全选按钮保持一致。

全选按钮被选中时，让所有商品背景色改变，反之则去掉背景色，同时也要改变已选商品件数和总额

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

     // 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历）

     $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

     getSum();   // 计算总额函数

     // 添加背景

     // 判断是否是选中状态，是的话添加check-cart-item类，没有就移除

     if($(this).prop("checked")) {

         $(".cart-item").addClass("check-cart-item");

     } else {

         $(".cart-item").removeClass("check-cart-item");

     }

 })

2. 当小复选框按钮改变时，判断是否所有的小按钮都是选中状态，是的话让全选按钮为选中状态，否则为未选中状态。

通过已选复选框的个数是否等于所有小复选框的总个数来判断，同时也要改变背景色和总额模块

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

     if($(".j-checkbox:checked").length === $(".j-checkbox").length) {

         $(".checkall").prop("checked", true);

     } else {

         $(".checkall").prop("checked", false);

     }

     getSum();

     // 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）

     if($(this).prop("checked")) {

         $(this).parents(".cart-item").addClass("check-cart-item");

     } else {

         $(this).parents(".cart-item").removeClass("check-cart-item");

     }

 })

3. 用户可以通过点击加减号或者直接修改文本框来修改商品数量，后边的小计也做相应的变化

①点击+按钮，文本框数字加一，小计加价。

先把原来的数量获取过来，然后在原来的基础上加一再赋给文本框；把单价获取过来，乘以文本框数量就是小计

 $(".increment").click(function() {

     var n = $(this).siblings(".itxt").val();

     n++;

     $(this).siblings(".itxt").val(n);

     // 小计模块

     // num为获取过来的单价，用substr()截取字符串把前边的￥去掉

     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);

     // toFixed(2)保留两位小数

     var price = (num * n).toFixed(2);

     $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);

     getSum();

 })

②点击-按钮，文本框数字减一，小计减价。

具体方法同上，有一点不一样是商品数量不能小于1，要判断一下

 $(".decrement").click(function() {

     var n = $(this).siblings(".itxt").val();

     n <= 1 ? n : n--;

     $(this).siblings(".itxt").val(n);

     // 小计模块

     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);

     // toFixed(2)保留两位小数

     var price = (num * n).toFixed(2);

     $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);

     getSum();

 })

③直接修改文本框改变数量

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

     var n = $(this).val();

     var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);

     // toFixed(2)保留两位小数

     var price = (num * n).toFixed(2);

     $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);

     getSum();

 })

4. 计算已选商品数及总额。封装成一个函数，页面加载完时应先调用一下，更新数据

声明变量来存储已选商品数以及总额，用each()遍历已选商品。

 function getSum() {

     var count = 0;

     var money = 0;

     // 只遍历选中的商品   each遍历，i为索引，ele为对象

     $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {

         count += parseInt($(ele).val());   // 会有小误差，要取整一下

     })

     $(".amount-sum em").text(count);

     $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {

         money += parseFloat($(ele).text().substr(1));

     })

     $(".price-sum em").text("￥" + money.toFixed(2));

 }

5. 删除模块

 // 删除单个商品

 $(".p-action a").click(function() {

     $(this).parents(".cart-item").remove();

     getSum();

 })

 // 删除选中商品

 $(".remove-batch").click(function() {

     $(".j-checkbox:checked").parents(".cart-item").remove();

     getSum();

 })

 // 清理购物车

 $(".clear-all").click(function() {

     $(".cart-item").remove();

     getSum();

 })

完整JS代码：

 $(function() {

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

         // 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历）

         $(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));

         getSum();   // 计算总额函数

         // 添加背景

         // 判断是否是选中状态，是的话添加check-cart-item类，没有就移除

         if($(this).prop("checked")) {

             $(".cart-item").addClass("check-cart-item");

         } else {

             $(".cart-item").removeClass("check-cart-item");

         }

     })

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

         if($(".j-checkbox:checked").length === $(".j-checkbox").length) {

             $(".checkall").prop("checked", true);

         } else {

             $(".checkall").prop("checked", false);

         }

         getSum();

         // 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）

         if($(this).prop("checked")) {

             $(this).parents(".cart-item").addClass("check-cart-item");

         } else {

             $(this).parents(".cart-item").removeClass("check-cart-item");

         }

     })

     // 点击+按钮，文本框数字加一

     $(".increment").click(function() {

         var n = $(this).siblings(".itxt").val();

         n++;

         $(this).siblings(".itxt").val(n);

         // 小计模块

         // num为获取过来的单价，用substr()截取字符串把前边的￥去掉

         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);

         // toFixed(2)保留两位小数

         var price = (num * n).toFixed(2);

         $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);

         getSum();

     })

     // 点击-按钮，文本框数字减一

     $(".decrement").click(function() {

         var n = $(this).siblings(".itxt").val();

         n <= 1 ? n : n--;

         $(this).siblings(".itxt").val(n);

         // 小计模块

         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);

         // toFixed(2)保留两位小数

         var price = (num * n).toFixed(2);

         $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);

         getSum();

     })

     // 当用户直接修改文本框时

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

         var n = $(this).val();

         var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);

         // toFixed(2)保留两位小数

         var price = (num * n).toFixed(2);

         $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);

         getSum();

     })

     // 计算总额函数

     getSum();

     function getSum() {

         var count = 0;

         var money = 0;

         // 只遍历选中的商品   each遍历，i为索引，ele为对象

         $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {

             count += parseInt($(ele).val());   // 会有小误差，要取整一下

         })

         $(".amount-sum em").text(count);

         $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {

             money += parseFloat($(ele).text().substr(1));

         })

         $(".price-sum em").text("￥" + money.toFixed(2));

     }

     // 删除商品模块

     // 删除单个商品

     $(".p-action a").click(function() {

         $(this).parents(".cart-item").remove();

         getSum();

     })

     // 删除选中商品

     $(".remove-batch").click(function() {

         $(".j-checkbox:checked").parents(".cart-item").remove();

         getSum();

     })

     // 清理购物车

     $(".clear-all").click(function() {

         $(".cart-item").remove();

         getSum();

     })

 })

巴特西

jQuery实现简单购物车页面

最新文章

热门文章