全选案例作业,和理解

Original 2018-12-16 23:23:12 187
abstract:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>T全选</title> <style type="text/css"> .box{width: 150px;heig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>T全选</title>
<style type="text/css">
.box{width: 150px;height: 300px;border: 3px solid #ff6700;border-radius: 5px,padding:5px 10px;margin: 20px auto;}
.box div{border-top: 1px solid #ff6700;padding-top: 10px;margin-bottom: 8px;}
.box input{margin:9px;font-size: 10px;}
span{color:#ff6700;}
</style>
<script type="text/javascript">
function checkall() {
var checkall,tiem;
checkall=document.getElementById('checkall') //获取全选
item=document.getElementsByName("item[]") //获取下面的勾选框
console.log(item)
for (var i=0 ; i<item.length; i++) {
if(checkall.checked){
item[i].checked=true; //当全选框被选中时,下面的勾选框选中
}else{
item[i].checked=false; //反之取消选中
}
}
}
</script>
</head>
<body>
<div>
<input type="checkbox" name="item[]"><span>选项1</span><br>
<input type="checkbox" name="item[]"><span>选项2</span><br>
<input type="checkbox" name="item[]"><span>选项3</span><br>
<input type="checkbox" name="item[]"><span>选项4</span><br>
<input type="checkbox" name="item[]"><span>选项5</span><br>
<input type="checkbox" name="item[]"><span>选项6</span><br>
<input type="checkbox" name="item[]"><span>选项7</span><br>
<input type="checkbox" name="item[]"><span>选项8</span><br>
<div>
<input type="checkbox" id="checkall" onclick="checkall()" name=""><label for="checkall">全选</label>
</div>
</div>
</body>
</html>

QQ截图20181216231846.jpg

总结:

for (var i=0 ; i<item.length; i++){}

本来for里面第2个参数,结束长度里为什么放length有点懵逼,然后console.log(item)后发现取出的数据里,有个length长度(这里应该是个数)有几个item。然后item[] 后面的[]是数组下标预留的放括号?

Correcting teacher:灭绝师太Correction time:2018-12-17 09:27:52
Teacher's summary:表示变量item获取的是一个数组对象啊!其实不理解的测试测试就明白了,继续加油!

Release Notes

Popular Entries