前端之购物车的数据列表功能实现
作者：互联网
在手机上的运行效果如下
当选中两件商品的时候
1、全选按钮没有被勾上
2、下面统计了选中的商品的个数
当选中全选的时候
1、所有商品被选中，而且全选按钮被选中
2、商品的个数为3，是正确的
3、当再次点击全选按钮的时候，所以的商品都不会被勾选
只要一个商品不被勾选，那么全选按钮就不会被勾选，只有所有的商品被勾选的时候，全选按钮才会被勾选
经数次测试，功能和淘宝购物车的列表功能相差无二
环境
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>
标签：src,num,前端,列表,ims,全选,var,li,购物车 来源： https://blog.csdn.net/qq_37591637/article/details/89024305