标签：src num 前端 列表 ims 全选 var li 购物车
在手机上的运行效果如下
当选中两件商品的时候
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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。