全选框的实现及自己的理解

原创 2018-11-27 20:38:46 281
摘要:<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>全选</title> <link rel="stylesheet" type="text/css"
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>全选</title>
	<link rel="stylesheet" type="text/css" href="../css/css.css">
	<link rel="shortcut icon" type="image/x-icom" href="../picture/mi.png">
	<style type="text/css">
		.box{width: 100px;height: 200px;border: 1px solid #000;border-radius: 5px;margin: 20px auto;padding:8px 10px;}
		.box div{border-bottom: 1px solid #000;margin-bottom: 15px;}
		.box input{margin: 8px;}
	</style>
</head>
<body>
	<script type="text/javascript">
		function checkall (){
		var checkall,item;
		checkall=document.getElementById("checkall");//获取全选
		item=document.getElementsByName("item[]");//获取下面的勾选框
		for (i =0;i<item.length;i++){
			if (checkall.checked){
				item[i].checked=true;
			}else{
				item[i].checked=false;
			}
		}
	}

	</script>
<div class="box">
	 <div><input type="checkbox" id="checkall" onclick="checkall()"><label for="chechall">全选</label><br>
	 </div>
     <input type="checkbox" name="item[]">选项1<br>
     <input type="checkbox" name="item[]">选项2<br>
     <input type="checkbox" name="item[]">选项3<br>
     <input type="checkbox" name="item[]">选项4<br>
     <input type="checkbox" name="item[]">选项5<br>
</div>
</body>
</html>

  老师这一节课我感觉好多都没有懂,特别是哪一个for循环item.length求取字符串的长度并且返回,但是勾选框有什么字符串呀? 

   还有就是全选框的地方为什么要加一个<label></label for ="id名">,我有试过不加这个label标签,全选框的功能也是可以正常实现的。

   这节课就是这几个地方感觉好模糊,没有什么概念了。

批改老师:灭绝师太批改时间:2018-11-28 09:18:42
老师总结:<label> 标签为 input 元素定义标注,这是一种写法习惯 for 属性应当与相关元素的 id 属性相同其实就是添加了一个关联;这些可以百度清楚啊! item.length 获取的是下面的勾选框长度

发布手记

热门词条