全选功能的实现
全选案例代码：
<!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>运行截图
总结：
熟悉了函数的调用过程，函数内的循环，判断流程也能掌握其原理。
每一步运行的过程基本掌握。