abstrakt：<!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>
終于覺得有點編程的樣子了。
但是也發(fā)現(xiàn)了自己還是老問題，對于一些關鍵的邏輯和屬性記憶模糊，需要一邊看視頻，一邊查屬性，才能理解老師視頻中的邏輯，有時還要想上好大一會。比起CSS的控制，感覺加上JS之后，明顯需要注意的細節(jié)更多，需要注意總體實現(xiàn)的邏輯，還要注意代碼中的書寫細節(jié)；
PS：onclick="checkAll()"一定要加括號，不然是調用不到方法的，30分鐘的撓頭查找史。
Korrigierender Lehrer：天蓬老師Korrekturzeit：2018-12-23 10:52:41
Zusammenfassung des Lehrers：寫多了就好了，一開始都這樣。另外，checkAll之所有要加括號，是因為onclick調用的是一個函數(shù)，而不是屬性。