摘要:<!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 获取的是下面的勾选框长度