abstract：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全选功能的实现</title> <style type="text/css"> .box{width: 100px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选功能的实现</title>
<style type="text/css">
.box{width: 100px;
height: 200px;
border: 1px solid #000;
border-radius: 5px;
margin: 20px auto;
padding: 0px 10px;}
.box div{border-bottom: 1px solid #000;
padding-top: 10px;
margin-bottom: 8px;}
.box input{margin: 8px;}
</style>
</head>
<body>
<div>
<div>
<input type="checkbox" id="checkall" onclick="CheckAll()"></input><label for="checkall">全选</label>
</div>
<input type="checkbox" name="item[]">唱歌</input><br>
<input type="checkbox" name="item[]">看书</input><br>
<input type="checkbox" name="item[]">跳舞</input><br>
<input type="checkbox" name="item[]">跑步</input><br>
<input type="checkbox" name="item[]">打球</input>
</div>
<script>
function CheckAll(){
var a,b;
a=document.getElementById('checkall');
b=document.getElementsByName('item[]');
for(var i=0;i<b.length;i++){
if(a.checked)
b[i].checked=true;
else
b[i].checked=false;
}
}
</script>
</body>
</html>总结：编写时一定要细心！因为length写成了lenght查错查了好久，浪费了好多时间。
Correcting teacher：天蓬老师Correction time：2019-01-13 19:15:25
Teacher's summary：复选框, checkbox, 应该设置一个或多个默认值的,防止用户无任何操作提交无效数据