前端之购物车的数据列表功能实现

青旅半醒 2022-02-24 15:22 242阅读 0赞

### **在手机上的运行效果如下** ###

当选中两件商品的时候

1、全选按钮没有被勾上

2、下面统计了选中的商品的个数

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70][]

当选中全选的时候

1、所有商品被选中，而且全选按钮被选中

2、商品的个数为3，是正确的

3、当再次点击全选按钮的时候，所以的商品都不会被勾选

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1][]

只要一个商品不被勾选，那么全选按钮就不会被勾选，只有所有的商品被勾选的时候，全选按钮才会被勾选

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2][]

--------------------

经数次测试，功能和淘宝购物车的列表功能相差无二

***环境***

1、bootstrap框架

2、jquery框架

--------------------

### **代码如下** ###

**注意：这里的api.css和api.js都没用到**

**bootstrap框架的js和css可以在bootstrap网站上免费下载**

<!DOCTYPE html>
    <html>
    <head>
    	<meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
      <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>共享农场-商家版本-下架商品</title>
    <script src="../script/jquery-1.10.2.js"></script>
    <script src="../script/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    </head>
    <style>
    .hespan{
    padding-top: 3%;
      padding-bottom:3%;
      text-align: center;
    }
    .smallicon{
      width:17px;
      height: 17px;
    }
    .mainimg{
      width: 122px;
        height:75px;
    }
    .table tr td {
    border:1px solid white;
    }
    body{
      background-color: #dddddd;
    }
    </style>
    <body>
      
      <div class="row" style="background-color:#4d84c6;color:white;">
        <div class="col-xs-4 hespan" >返回</div>
          <div class="col-xs-4 hespan" >下架商品页面</div>
            <div class="col-xs-4 hespan" >编辑</div>
      </div>
      <br><br>
    
    <ul id="allli">
    <div class="container" style="background-color:white">
    <table class="table">
    	<tr>
        <td rowspan="2"><li>
    			<img src="../image/icon/circle.png" class="smallicon" id="one" onclick="eq('one')"/></li>
    		</td>
        <td rowspan="2"><img src="../image/soil.jpg" class="mainimg" /></td>
        <td class="h5">红富士水果一件起批</td></tr>
    		<tr><td>￥69.12/套</td></tr>
    	</table>
    </div>
    
    <div class="container" style="background-color:white">
    <table class="table">
    	<tr>
        <td rowspan="2"><li>
    			<img src="../image/icon/circle.png" class="smallicon"  id="two" onclick="eq('two')"/></li></td>
        <td rowspan="2"><img src="../image/soil.jpg" class="mainimg"/></td>
        <td class="h5">新鲜的水果蔬菜幼苗</td></tr>
      </div>
    		<tr><td>￥12.00/把</td></tr>
    	</table>
    </div>
    
    <div class="container" style="background-color:white">
    <table class="table">
    	<tr>
        <td rowspan="2">
    			<li>
    			<img src="../image/icon/circle.png" class="smallicon"  id="three" onclick="eq('three')"/>
    </li>
    		</td>
        <td rowspan="2"><img src="../image/soil.jpg" class="mainimg"/></td>
        <td class="h5">东北黑土地，优质大米种植</td></tr>
      </div>
    		<tr><td>￥999.00/年</td></tr>
    	</table>
    	</div>
    
    	<table class="table">
    <tr><td>
    		<img src="../image/icon/circle.png" class="smallicon"  id="all" onclick="allcheck()"/>
    	<button type="button" class="btn btn-danger" onclick="allcheck()">全选</button>
    </td><td id="allnum"></td><td>下架</td></tr>
    	</table>
    
    </ul>
    </body>
    <script>
    apiready=function(){
    	//var name=$api.pageParam.name;
    }
    var ncheck="../image/icon/circle.png";
    var ycheck="../image/icon/checkedcircle.png";
    function eq(c){
    	var status=$("#"+c)[0].src;
    	var fg=status.indexOf("/icon/circle.png");
    	if(fg==-1){
    			  $("#"+c).attr("src",ncheck);
    					$("#all").attr("src",ncheck);
    	}else{
    		  $("#"+c).attr("src",ycheck);
    			checkeds();
    	}
    	//每次都统计一下选中的商品的个数
    	var num=checkednum();
    	$("#allnum").html("总计"+num+"件商品");
    }
    	//点击两次，我们判断如果之前是全选的话，这次就全不选
    function allcheck(){
    	var ims=$("#allli li img");//获取所有的li元素
      var num=checkednum();
    				if(num==ims.size()){//全部被选中
    	      	allnocheck();
    				}else{
    					  allchecked();
    				}
    				//每次都统计一下选中的商品的个数
    				var num=checkednum();
    				$("#allnum").html("总计"+num+"件商品");
    }
    //如果所有的选项选中了，那么全选按钮也选中
    function  checkeds(){
    var ims=$("#allli li img");//获取所有的li元素
    var num=checkednum();
    				if(num==ims.size()){//全部被选中
    						$("#all").attr("src",ycheck);
    				}else{
    						$("#all").attr("src",ncheck);
    				}
    }
    //全不选
    function allnocheck(){
    var ims=$("#allli li img");//获取所有的li元素
    for (var i = 0; i < ims.size(); i++) {
    	$(ims[i]).attr("src",ncheck);
    	$("#all").attr("src",ncheck);
    }
    }
    //全选
    function allchecked(){
    	//否则的话就是全选
    var ims=$("#allli li img");//获取所有的li元素
    for (var i = 0; i < ims.size(); i++) {
    	$(ims[i]).attr("src",ycheck);
    	$("#all").attr("src",ycheck);
    }
    }
    //被选中的个数
    function checkednum(){
    	var ims=$("#allli li img");//获取所有的li元素
    	var num=0;
    	for (var i = 0; i < ims.size(); i++) {
    	var fg=$(ims[i])[0].src.indexOf("/icon/checkedcircle.png");
    	if(fg!=-1){//被选中
    		num++;
    					}
    				}
    	return num;
    }
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70]: /images/20220224/4d1ff291fef34b11aaa140691818b4bb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 1]: /images/20220224/44e5e00d881247a485c3879ca38c4662.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTkxNjM3_size_16_color_FFFFFF_t_70 2]: /images/20220224/8b64e7e8eebc4e8da66fb1d0f6c4852b.png