老师，当我依次点击三个多选框时，第一个和最后一个全选框没有反应，但是当我点击第一个或者最后一个全选框时三个多选框都会被选中，如果点击第一个或者最后一个全选框之后再去掉三个多选框中的任何一个第一个和最后一个全选框也都会被取消，请问老师，我该如何解决只点击三个多选框而出发全选框被选中呢
动图如下：
GIF.gif
源码如下：
html部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/jd.css"/>
<link rel="stylesheet" type="text/css" href="icon/iconfont.css"/>
<!--引入JS文件-->
<script type="text/javascript" src="js/jd.js"></script>
</head>
<body>
<!--导航开始-->
<div class="nav">
<div class="warp">
<ul class="nav_ul1">
<li><a href=""><i class="iconfont"></i>京东首页</a></li>
<li><a href="">配送到：北京</a></li>
</ul>
<ul>
<ul class="nav_ul2">
<li><a href="">洋洋宝贝</a><span>|</span></li>
<li><a href="">我的订单</a><span>|</span></li>
<li><a href="">我的京东</a><span>|</span></li>
<li><a href="">京东会员</a><span>|</span></li>
<li><a href="">企业采购</a><span>|</span></li>
<li><a href="">京东手机</a><span>|</span></li>
<li><a href="">关注京东</a><span>|</span></li>
<li><a href="">客户服务</a><span>|</span></li>
<li><a href="">网站导航</a></li>
</ul>
</ul>
</div>
</div>
<!--导航结束-->
<!--搜索框开始-->
<div class="search">
<div class="warp">
<img src="img/logo.jpg"/>
<div class="search_div">
<input type="text" class="search_text"/>
<input type="button" value="搜索" class="search_but"/>
</div>
</div>
</div>
<!--搜索框结束-->
<!--标题开始-->
<div class="title warp">
<h3>全部商品</h3>
<div>
<span>配送到</span>
<select>
<option>昌平区</option>
<option>朝阳区</option>
<option>海定区</option>
<option>顺义区</option>
<option>大兴区</option>
</select>
</div>
</div>
<!--标题结束-->
<!--显示菜单的开始-->
<div class="tips warp">
<ul>
<li>
<input type="checkbox" name="fav" id="all" onclick="checkTest1(this)"/>
全选
</li>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li>小计</li>
<li>操作</li>
</ul>
</div>
<!--显示菜单的结束-->
<!--商品详情展示开始-->
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
<li class="info_2"><img src="img/img1.jpg" width="80px"/></li>
<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色：灰色+粉红</a></li>
<li class="info_5">￥182.5</li>
<li class="info_6">
<button>-</button>
<input type="text" name="" id="" value="1" />
<button class="info_bot">+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<a>删除</a><br />
<a>移到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
<li class="info_2"><img src="img/img3.jpg" width="80px"/></li>
<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色：灰色+粉红</a></li>
<li class="info_5">￥182.5</li>
<li class="info_6">
<button>-</button>
<input type="text" name="fav" id="" value="1" />
<button class="info_bot">+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<a>删除</a><br />
<a>移到我的关注</a>
</li>
</ul>
</div>
<div class="info warp">
<ul>
<li class="info_1"><input type="checkbox" name="fav" onclick="checkTest2()"/></li>
<li class="info_2"><img src="img/img2.jpg" width="80px"/></li>
<li class="info_3"><a>【京东超市】desha春秋季儿童休闲服</a></li>
<li class="info_4"><a>颜色：灰色+粉红</a></li>
<li class="info_5">￥182.5</li>
<li class="info_6">
<button>-</button>
<input type="text" name="" id="" value="1" />
<button class="info_bot">+</button>
</li>
<li class="info_7">￥182.5</li>
<li>
<a>删除</a><br />
<a>移到我的关注</a>
</li>
</ul>
</div>
<!--商品详情展示结束-->
<!--结算模块开始-->
<div class="balance warp">
<ul class="balance_ul1">
<li>
<input type="checkbox" name="fav" id="" value="" onclick="checkTest1(this)" />
全选
</li>
<li><a>删除选中商品</a></li>
<li><a>移到我的关注</a></li>
<li><a>清除下柜商品</a></li>
</ul>
<ul class="balance_ul2">
<li>已选择<span>1</span>件商品</li>
<li>总价 <span>￥12</span></li>
<li>
<button class="butt">去结算</button>
</li>
</ul>
</div>
<!--结算模块结束-->
</body>
</html>
JS部分：
//获得所有name=fav的多选框对象 定义成全局变量
var fav = document.getElementsByName("fav");
//判断是否全选操作
function checkTest1(th){
var flag = th.checked;//判断所选中对象有没有被勾选
for(var i in fav){
fav[i].checked = flag;
}
}
//单选决定全选的操作
function checkTest2(){
var flag = true;
//去掉第一个和最后一个多选框（全选框），当其他多选框都选中之后才触发全选框被勾选
for(var i=1;i<fav.length-1;i++){//注意循环的开始和结束
if(!fav[i].checked){
flag = false;
break;//但凡有一个多选框没被选中剩下的就可以不用判断了，跳出循环
}
}
//根据flag的值决定全选框是否被勾选
fav[0].checked = flag;//下标为0对应的是第一个全选框
fav[fav.length-1].checked = flag;//下标为length-1对应的是最后一个全选框
}
京公网安备 11011402011233号
