abstract：全選案例代碼：<!doctype html> <html> <head> <meta charset="UTF-8"> <title>全選</title>
全選案例代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>全選</title>
<style>
#box {
width: 100px;
border-radius: 10px;
border: 1px solid red;
text-align: center;
padding-bottom: 10px;
}
#box div {
border-bottom: 1px solid #CCCCCC;
height: 30px;
line-height: 30px;
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="box">
<div>
<input type="checkbox" id="checkall" onclick="checkall()"><label for="checkall">全選</label>
</div>
<input type="checkbox" class="item[]">選項一<br>
<input type="checkbox" class="item[]">選項二<br>
<input type="checkbox" class="item[]">選項三<br>
<input type="checkbox" class="item[]">選項四<br>
<input type="checkbox" class="item[]">選項五<br>
<input type="checkbox" class="item[]">選項六<br>
</div>
<script>
function checkall() {
var all = document.getElementById('checkall');
var item = document.getElementsByClassName('item[]');
for(var i = 0;i<item.length;i++){
if(all.checked){
item[i].checked = true;
}else {
item[i].checked = false;
}
}
}
</script>
</body>
</html>運行截圖
總結：
熟悉了函數的調用過程，函數內的循環(huán)，判斷流程也能掌握其原理。
每一步運行的過程基本掌握。
Correcting teacher：天蓬老師Correction time：2019-07-01 17:35:43
Teacher's summary：前端中的javascript一直是一個難點, 也是一個重點, 多動手是唯一的辦法