abstract：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{margin:0px auto;}
.box{width:230px;height: 220px;border: 1px solid black;border-radius:5px;padding:5px 10px;}
.box_all{border-bottom: 1px solid black;padding-bottom: 10px;}
.box_option{padding: 10px 0px;}
.box_option input{margin:10px;}
</style>
<script>
var checkall,checkall_while,item;
window.onload = function(){
checkall = document.getElementById("checkall");
checkall_while = document.getElementById("checkall_while");
item = document.getElementsByName("item[]");
}
function checkAll(){
checkall_while.checked = false;
for (let i = 0; i < item.length; i++) {
if (checkall.checked) {
item[i].checked = true;
} else {
item[i].checked = false;
}
}
}
function checkAll_while(){
checkall.checked = false;
var i = 0;
while (i<item.length ) {
if (checkall_while.checked) {
item[i].checked = true;
} else {
item[i].checked = false;
}
i++;
}
}
</script>
</head>
<body>
<div class="box">
<div class="box_all">
<input type="checkbox" id="checkall" onclick="checkAll()">
<label for="chackall">全选(for)</label>
<input type="checkbox" id="checkall_while" onclick="checkAll_while()">
<label for="chackall">全选(while)</label>
</div>
<div class="box_option">
<input type="checkbox" name="item[]">选项1<br>
<input type="checkbox" name="item[]">选项2<br>
<input type="checkbox" name="item[]">选项3<br>
<input type="checkbox" name="item[]">选项4<br>
<input type="checkbox" name="item[]">选项5<br>
</div>
</div>
</body>
</html>
Correcting teacher：灭绝师太Correction time：2019-01-14 09:10:08
Teacher's summary：活学活用，很不错，全选案例后面运用比较多。要好好掌握哦！