摘要：<!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标签有点陌生了，发现如果label里面的for属性值如果和input的id值不同的话，实现不了点文字就选中的效果。
第二点：除了id获取，别的获取都是加个s。 -->
批改老师：天蓬老师批改时间：2018-12-29 16:58:16
老师总结：name="item[]", 全选 的重点是在这里
