返回全选框的实现及......登陆

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

沉寂2018-11-27 20:38:46207
<!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标签,全选框的功能也是可以正常实现的。

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

最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送