控制全选小案例,

原创 2019-01-06 22:33:04 239
摘要:<!DOCTYPE> <html> <head> <meta charset="utf-8"> <title>控制全选</title> <style> .box{height:300px; width:70px; border:1px 
<!DOCTYPE>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制全选</title>
		<style>
			.box{height:300px; width:70px; border:1px solid #000; border-radius:5px; padding:2px 10px; margin:40px auto;}
			.box div{border-bottom:1px solid #000;padding:5px 0px;}
			.box input{margin:10px 0px;}
		</style>
		<script type="text/javascript">
			function checkall() {
				var checkall,item;
				checkall=document.getElementById("checkall")    //获取全选框的ID
				item=document.getElementsByName("item[]")       //获取选项框的name item:项目   
				var i=0                                          
				while(i<6){
					if(checkall.checked){                       //checked:选中      英语不好,这一段看视频可是让我好懵
						item[i].checked=true;i++
					}else{
						item[i].checked=false;i++
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="box">
			<div>
				<input type="checkbox" id="checkall" onclick="checkall()"><label for="checkall">全选</label>    //label:input元素定义标签 for属性为了捆绑对应的input元素
			</div>
			<input type="checkbox" name="item[]">选项1
			<input type="checkbox" name="item[]">选项2
			<input type="checkbox" name="item[]">选项3
			<input type="checkbox" name="item[]">选项4
			<input type="checkbox" name="item[]">选项5
			<input type="checkbox" name="item[]">选项6
		</div>
	</body>
</html>


批改老师:韦小宝批改时间:2019-01-07 09:39:31
老师总结:写的很不错 全选在很多项目中都有 不管是前台还是后台 都很常见全选 全选中最主要的也就是全部选中后可以获取全部被选的信息

发布手记

热门词条