一个简单的购物车jQuery

就只做了一个界面，带着一点小功能



先放个目录

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7         <link rel="stylesheet" type="text/css" href="css/cart.css" />
  8         <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
  9         <script type="text/javascript">
 10             $(function() {
 11             /*全选按钮功能*/
 12                 //                console.log($("#t-checkbox"));
 13                 /*                $(".t-checkbox input[name=t-checkbox]").click(function(){
 14                                     $(".p-checkbox input[name=p-checkbox]").prop("checked",$(this).prop("checked"))
 15                                 });*/
 16 
 17                 /*
 18                  *id选择器只返回文档中的第一个id为改值的元素，所以使用id选择器时，只有第一个有效
 19                  */
 20                 /*                $("#t-checkbox").click(function(){
 21                                     $("#p-checkbox").prop("checked",$(this).prop("checked"))
 22                                 });    
 23                 */
 24                 $("#t-checkbox").click(function() {
 25                     $(".p-checkbox input[name=p-checkbox]").prop("checked", $(this).prop("checked"))
 26                     countSum();
 27                 })
 28                 
 29             /*单个按钮影响全选*/
 30                 $(".p-checkbox input[name=p-checkbox]").click(function(){
 31 //                    var chk=true;
 32 //                    $(".p-checkbox input[name=p-checkbox]").each(function(){
 33 //                        /*如果遍历到的元素未被选中*/
 34 //                        if(!$(this).prop("checked")){
 35 //                            chk=false;
 36 //                        }
 37 //                    })
 38 //                    $("#t-checkbox").prop("checked",chk);
 39                     /*上面的改进*/
 40 //                    console.log($("input[name='p-checkbox']:not(:checked)"));
 41                     $("#t-checkbox").prop("checked",!($("input[name='p-checkbox']:not(:checked)").length>0));
 42                     countSum();
 43                 })
 44                 
 45             /*
 46              * 按钮数量加1，改变小计价格数
 47              * $(this).prev().val()取出来的是一个字符串类型的数据，需要进行数据转化再加1，否则会执行字符串的拼接
 48              */
 49 /*                console.log(
 50                     $(".p-quantity input:eq(2)")//此选择器只会选择1个
 51                 );*/
 52 //                console.log($(".p-quantity input[value='+']"));
 53                 $(".p-quantity input[value='+']").click(function(){
 54                     /*数量加1*/
 55                     var quantity=parseInt($(this).prev().val())+1;
 56                     /*再设置文本框内容*/
 57                     $(this).prev().val(quantity);
 58                     
 59                     /*改变小计*/
 60                     $(this).parent().next().text(
 61                         $(this).parent().prev().text()*quantity
 62                     )
 63                     countSum();
 64                 })
 65                 
 66             /*
 67              * 按钮数量减1
 68              */
 69                 $(".p-quantity input[value='-']").click(function(){
 70                     /*数量减1*/
 71                     var quantity=parseInt($(this).next().val())-1;
 72                     if(quantity==0){
 73                         return;
 74                     }
 75                     
 76                     /*再设置文本框内容*/
 77                     $(this).next().val(quantity);
 78                     
 79                     /*改变小计*/
 80                     $(this).parent().next().text(
 81                         $(this).parent().prev().text()*quantity
 82                     )
 83                     countSum();
 84                 })
 85                 
 86             /*计算总价*/
 87 //                console.log($("input[name=p-checkbox]").parents(".item-form").children(""));
 88 //                console.log($("input[type=checkbox]"));
 89                 function countSum(){
 90                     var sum=0;
 91                     /*遍历单个商品复选框*/
 92 //                    $("input[name='p-checkbox']").each(function(){
 93 //                        if($(this).prop("checked")){
 94 //                            sum+=parseFloat($(this).parents(".item-form").children(".p-sum").text());
 95 //                        }
 96 //                    })
 97                     /*上面的改进*/
 98                     
 99                     $("input[name='p-checkbox']:checked").each(function(){
100                         sum+=parseFloat($(this).parents(".item-form").children(".p-sum").text());
101                     })
102                     
103                     $(".price-sum span").text(sum);
104                 }
105                 countSum();
106                 
107             /*单个删除*/
108                 $(".p-action").click(function(){
109                     if(confirm("确认要删除该商品吗")){
110                         /*下面也可，因为父元素直接是要删除的div*/
111 //                        $(this).parent().remove();
112                         $(this).parents(".item-form").remove();    
113                         countSum();
114                         isEmpty();
115                     }
116                 })
117                 
118             /*选择删除*/
119                 $(".del-selected").click(function(){
120                     if(confirm("确认删除所选商品?")){
121                         //方法已改进
122                         $(".p-checkbox :checked").parents(".item-form").remove();
123                         countSum();
124                         isEmpty();
125                     }
126                 })
127                 
128             /*判断购物车中是否有商品,没有商品显示默认信息*/
129                 function isEmpty(){
130                     if($(".item-form").length==0){
131                         $(".no-item").css("display","block");
132                         return true;
133                     }
134                     return false;
135                 }
136                 isEmpty();
137             })
138         </script>
139     </head>
140 
141     <body>
142         <div class="cart">
143             <form action="" method="post">
144                 <div class="cart-thead">
145                     <div class="column t-checkbox">
146                         <input type="checkbox" name="t-checkbox" id="t-checkbox" checked="checked" /> 全选
147                     </div>
148                     <div class="column t-img">
149                         图片
150                     </div>
151                     <div class="column t-goods">
152                         商品
153                     </div>
154                     <div class="column t-price">
155                         单价
156                     </div>
157                     <div class="column t-quantity">
158                         数量
159                     </div>
160                     <div class="column t-sum">
161                         小计
162                     </div>
163                     <div class="column t-action">
164                         操作
165                     </div>
166                 </div>
167 
168                 <div class="item-form">
169                     <div class="cell p-checkbox">
170                         <input type="checkbox" name="p-checkbox" id="p-checkbox" checked="checked" />
171                     </div>
172                     <div class="cell p-img">
173                         <img src="img/lb1.jpg" />
174                     </div>
175                     <div class="cell p-goods">
176                         商品A
177                     </div>
178                     <div class="cell p-price">
179                         62
180                     </div>
181                     <div class="cell p-quantity">
182                         <input type="button" id="" value="-" />
183                         <input type="text" id="" value="1" />
184                         <input type="button" id="" value="+" />
185                     </div>
186                     <div class="cell p-sum">
187                         62
188                     </div>
189                     <div class="cell p-action">
190                         <!--<a href="javascript:">删除</a>-->
191                         删除
192                     </div>
193                 </div>
194                 <div class="item-form">
195                     <div class="cell p-checkbox">
196                         <input type="checkbox" name="p-checkbox" id="p-checkbox" checked="checked" />
197                     </div>
198                     <div class="cell p-img">
199                         <img src="img/lb1.jpg" />
200                     </div>
201                     <div class="cell p-goods">
202                         商品B
203                     </div>
204                     <div class="cell p-price">
205                         72
206                     </div>
207                     <div class="cell p-quantity">
208                         <input type="button" id="" value="-" />
209                         <input type="text" id="" value="1" />
210                         <input type="button" id="" value="+" />
211                     </div>
212                     <div class="cell p-sum">
213                         72
214                     </div>
215                     <div class="cell p-action">
216                         <!--<a href="javascript:">删除</a>-->
217                         删除
218                     </div>
219                 </div>
220                 <div class="item-form">
221                     <div class="cell p-checkbox">
222                         <input type="checkbox" name="p-checkbox" id="p-checkbox" checked="checked" />
223                     </div>
224                     <div class="cell p-img">
225                         <img src="img/lb1.jpg" />
226                     </div>
227                     <div class="cell p-goods">
228                         商品C
229                     </div>
230                     <div class="cell p-price">
231                         82
232                     </div>
233                     <div class="cell p-quantity">
234                         <input type="button" id="" value="-" />
235                         <input type="text" id="" value="1" />
236                         <input type="button" id="" value="+" />
237                     </div>
238                     <div class="cell p-sum">
239                         82
240                     </div>
241                     <div class="cell p-action">
242                         <!--<a href="javascript:">删除</a>-->
243                         删除
244                     </div>
245                 </div>
246                 
247                 <div class="no-item">
248                     购物车已空空如也，快去购物吧
249                 </div>
250                 <hr />
251                 <div class="cart-floatbar">
252                     <div class="del-selected">
253                         <!--<a href="javascript:">删除所选</a>-->
254                         删除所选
255                     </div>
256                     <div class="price-sum">
257                         总价：<span>0</span>元
258                         <input type="submit" value="去结算" />
259                         <!--<input type="image" src="//misc.360buyimg.com/user/cart/css/i/cart-submit-btn-2019.png"  >/>-->
260                     </div>
261                 </div>
262             </form>
263         </div>
264     </body>
265 
266 </html>

/*购物div*/
.cart{
    width: 1026px;
    margin: 0px auto;
}
/*购物表格标题栏*/
.cart-thead{
    background-color: #f3f3f3;
    border: 1px solid #e9e9e9;
}

.column{
    display: inline-block;
    /*float: left;*/
    height: 30px;
    line-height: 30px;
}

.t-checkbox{
    width: 80px;
}

.t-img{
    width: 150px;
}

.t-goods{
    width: 300px;
}

.t-price{
    width: 100px;
}

.t-quantity{
    width: 200px;
}

.t-sum{
    width: 100px;
}

.t-action{
    width: 65px;
}
/*购物表格标题栏结束*/

/*购物清单*/
.item-form{
    margin: 10px 0px;
}

.cell{
    display: inline-block;
    /*float: left;*/
    height: 100px;
    line-height: 100px;
}

.p-checkbox{
    width: 80px;
    text-align: center;
}

.p-img{
    width: 150px;
}
.p-img img{
    width: 150px;
    height: 90px;
}

.p-goods{
    width: 300px;
}

.p-price{
    width: 100px;
}

.p-quantity{
    width: 200px;
}
.p-quantity input[type=text]{
    width: 20px;
}

.p-sum{
    width: 100px;
}

.p-action{
    width: 65px;
    cursor: pointer;
}

.no-item{
    display: none;
    text-align: center;
    color: brown;
    font-size: 20px;
    height: 120px;
    line-height: 120px;
}
/*购物清单结束*/

/*购物表格结算*/
.cart-floatbar{
    height: 30px;
    /*background-color: #666666;*/
    line-height: 30px;
}
.cart-floatbar div{
    display: inline-block;
    /*text-align: right;*/
    /*float: right;*/
}
.del-selected{
    text-align: center;
    cursor: pointer;
}
.price-sum{
    float: right;
}
/*购物表格结算结束*/

未经授权商用禁止，转载请标明出处，附上原文链接个人能力有限，若有不足之处欢迎各位大佬指出