abstract：<!doctype html><html><head> <meta charset="UTF-8"> <title>全选全不选</title> <style type="text/css">&nbs
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>全选全不选</title>
<style type="text/css">
.box{width:120px;height:250px;border:1px solid #ccc;border-radius:15px;padding:0px 10px;margin:50px auto;}
.box div{border-bottom:1px solid #ccc;padding:10px 0px 10px 0px;margin-bottom:8px;}
.box input{margin:6px;}
</style>
</head>
<body>
<div>
<div class="">
<input type="checkbox" id="checkall" onclick="checkAll()"><label for="checkall">全选</label>
</div>
<input type="checkbox" name="item[]">关羽<br>
<input type="checkbox" name="item[]">张飞<br>
<input type="checkbox" name="item[]">赵云<br>
<input type="checkbox" name="item[]">黄忠<br>
<input type="checkbox" name="item[]">刘备<br>
<input type="checkbox" name="item[]">诸葛亮<br>
</div>
<script type="text/javascript">
function checkAll(){
var checkall,item;
checkall=document.getElementById('checkall')//获取到全选复选框
item=document.getElementsByName('item[]')//获取到下面的小弟复选框
for(var i=0;i<item.length;i++){
if(checkall.checked){
item[i].checked=true;
}else{
item[i].checked=false;
}
}
}
</script>
</body>
</html>
终于觉得有点编程的样子了。
但是也发现了自己还是老问题，对于一些关键的逻辑和属性记忆模糊，需要一边看视频，一边查属性，才能理解老师视频中的逻辑，有时还要想上好大一会。比起CSS的控制，感觉加上JS之后，明显需要注意的细节更多，需要注意总体实现的逻辑，还要注意代码中的书写细节；
PS：onclick="checkAll()"一定要加括号，不然是调用不到方法的，30分钟的挠头查找史。
Correcting teacher：天蓬老师Correction time：2018-12-23 10:52:41
Teacher's summary：写多了就好了，一开始都这样。另外，checkAll之所有要加括号，是因为onclick调用的是一个函数，而不是属性。