会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132358个问题
JAVA 全系列/第四阶段:网页编程和设计/JavaScript语言 617楼
JAVA 全系列/第四阶段:网页编程和设计/HTML5(旧) 620楼

老师,为什么我点击全选框,没有反应啊?实在找不到哪出错了

<!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" />
		
		<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">&#xe8ff;</i>京东首页</a></li>
						<li><a href="">配送到:北京</a></li>
					</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>
					
				</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>
					
				</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" /></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">¥152.6</li>
				<li class="info_6">					
					<button>-</button>
					<input type="text" value="1" />
					<button class="bot">+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav"/></li>
				<li class="info_2"> <img src="img/img2.jpg" width="80px"/></li>
				<li class="info_3"><a>【京东超市】联想电脑,第六代智能英特尔 </a></li>
				<li class="info_4"><a>颜色:灰色+粉红</a></li>
				<li class="info_5">¥152.6</li>
				<li class="info_6">					
					<button>-</button>
					<input type="text" value="1" />
					<button class="bot">+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<div class="info warp">
			
			<ul>
				<li class="info_1"><input type="checkbox" name="fav"/></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">¥152.6</li>
				<li class="info_6">					
					<button>-</button>
					<input type="text" value="1" />
					<button class="bot">+</button>					
				</li>
				<li class="info_7">¥152.6</li>
				<li class="info_8">
					<a>删除</a><br />
					<a>移至我的关注</a>
				</li>
			</ul>
					
		</div>
		
		<!--商品详情展示结束-->
		
		
		<!--结算模块开始-->
		
		<div class="balance warp">
		
			<ul class="balance_ul1">
				<li><input type="checkbox" name="fav" 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代码:

//判断是否全选操作
function checkTest1(th){
	
	var flag = th.checked;
	
	//获得所有的多选框对象
	var fav = document.getElementsByName("fav");
		
		for(var i in fav){
			fav[i].checked = false;
		}	
	}

运行效果图

GIF.gif

JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 621楼
JAVA 全系列/第四阶段:网页编程和设计/CSS3(旧) 623楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 624楼
JAVA 全系列/第四阶段:网页编程和设计/Javascript 语言(旧) 629楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637