高性能实现全选按钮

原创 2018-11-10 03:41:06 6
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>全选</title>
		<style type="text/css">
			body , ul,li {margin: 0px;padding: 0px;list-style: none;}
				
			.box{
				width:100px;
				border: 2px solid #999;
				margin: 20px auto;
				border-radius:5px;
				box-shadow:2px 2px 15px #FFC0CB;
				text-align: center;
			}
			
			.box li{
				margin:8px auto;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<ul>
				<li><label for="QX">全选</label><input id="QX" type="checkbox" name="quanxuan" onclick="InputTag('input')"></li>
				<li><label for="YY">游泳</label> <input id="YY" type="checkbox" name="item"></li>
				<li><label for="JS">健身</label> <input id="JS" type="checkbox" name="item" checked></li>
				<li><label for="KS">看书</label> <input id="KS" type="checkbox" name="item"></li>
				<li><label for="TG">听歌</label> <input id="TG" type="checkbox" name="item"></li>
			</ul>
		</div>
		
		<script>
			//所有的input集合  , 设置true选中 ,false没选中
			var OTag , Bool ;
			
			//获取到标签集合
			function InputTag(Tag){
				if(!OTag){
					OTag = document.getElementsByTagName(Tag)
				}	
				//将全选中的checked属性值赋值给Bool
				Bool = OTag[0].checked;				
				//从索引1开始,因为索引0是全选按钮
				for(var i =1;i<OTag.length;i++){
					OTag[i].checked = Bool;
				}
			}
		</script>
	</body>
</html>


批改老师:韦小宝批改时间:2018-11-10 09:38:09
老师总结:嗯!写的很不错!很完整!课后还得多多练习啊!

发布手记

热门词条