摘要：<!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[]">關(guān)羽<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')//獲取到全選復(fù)選框
item=document.getElementsByName('item[]')//獲取到下面的小弟復(fù)選框
for(var i=0;i<item.length;i++){
if(checkall.checked){
item[i].checked=true;
}else{
item[i].checked=false;
}
}
}
</script>
</body>
</html>
終于覺(jué)得有點(diǎn)編程的樣子了。
但是也發(fā)現(xiàn)了自己還是老問(wèn)題，對(duì)于一些關(guān)鍵的邏輯和屬性記憶模糊，需要一邊看視頻，一邊查屬性，才能理解老師視頻中的邏輯，有時(shí)還要想上好大一會(huì)。比起CSS的控制，感覺(jué)加上JS之后，明顯需要注意的細(xì)節(jié)更多，需要注意總體實(shí)現(xiàn)的邏輯，還要注意代碼中的書(shū)寫(xiě)細(xì)節(jié)；
PS：onclick="checkAll()"一定要加括號(hào)，不然是調(diào)用不到方法的，30分鐘的撓頭查找史。
批改老師：天蓬老師批改時(shí)間：2018-12-23 10:52:41
老師總結(jié)：寫(xiě)多了就好了，一開(kāi)始都這樣。另外，checkAll之所有要加括號(hào)，是因?yàn)閛nclick調(diào)用的是一個(gè)函數(shù)，而不是屬性。