摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選實例</title> <style type="text/css"> #wai{width:150px;height
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全選實例</title>
<style type="text/css">
#wai{width:150px;height:300px;border:2px solid #ccc;border-radius:10px;margin:0px auto;box-shadow:3px 2px 3px #cc1;}
span{font-size:20px; font-weight:bold;color:red;margin:0px auto;display:block;text-align:center;margin-top:15px;}
#ks{display:block;margin:10px auto;}
input{margin:8px 10px;}
</style>
<script type="text/javascript">
function start(){
document.getElementById('show').style.display="block"
}
function chall(){
var checkall,item;
checkall = document.getElementById("checkall")
item = document.getElementsByName("item[]")
for(var i=0;i<item.length;i++)
if(checkall.checked){
item[i].checked=true;
}else{
item[i].checked=false;
}
}
function tj(){
alert("謝謝參與調查！")
}
</script>
</head>
<body>
<div id="wai">
<span>興趣調查</span>
<input id="ks" type="button" value="開始" onclick="start(this)">
<div id="show" style="display:none;">
<input type="checkbox" name="item[]">看電影<br>
<input type="checkbox" name="item[]">踢球<br>
<input type="checkbox" name="item[]">讀書<br>
<input type="checkbox" name="item[]">旅游<br>
<input type="checkbox" name="item[]">宅<br>
<div>
<input type="checkbox" id="checkall" onclick="chall()"><label for="checkall">全選</label>
</div>
<input type="button" value="提交" onclick="tj(this)">
</div>
</div>
</body>
</html>
<!-- 第一點：對label標簽有點陌生了，發(fā)現如果label里面的for屬性值如果和input的id值不同的話，實現不了點文字就選中的效果。
第二點：除了id獲取，別的獲取都是加個s。 -->
批改老師：天蓬老師批改時間：2018-12-29 16:58:16
老師總結：name="item[]", 全選 的重點是在這里