摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選功能的實現(xiàn)</title> <style type="text/css"> .box{width: 100px;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全選功能的實現(xiàn)</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>總結(jié)：編寫時一定要細心！因為length寫成了lenght查錯查了好久，浪費了好多時間。
批改老師：天蓬老師批改時間：2019-01-13 19:15:25
老師總結(jié)：復(fù)選框, checkbox, 應(yīng)該設(shè)置一個或多個默認值的,防止用戶無任何操作提交無效數(shù)據(jù)