abstract：<!DOCTYPE html /><html> <head> <meta charset="utf-8" /> <title>JavaScript案例-全选效果</title> <style
<!DOCTYPE html />
<html>
<head>
<meta charset="utf-8" />
<title>JavaScript案例-全选效果</title>
<style>
*{
margin:0px;
padding:0px;
}
.box{
width:100px;
height:220px;
margin:20px auto;
padding:5px;
border:1px solid #666;
border-radius:5px;
}
.box input{
margin:8px 5px;
}
.box hr{
margin:4px 0px;
background-color:#000;
}
</style>
<script type="text/javascript">
function checkAll(){ //创建函数
var checkall,option; //声明两个变量
checkall=document.getElementById("checkall"); //获取id="checkall"即全选
option=document.getElementsByName("option[]"); //获取name="option[]"即选项
for (i=0;i<option.length;i++){ //循环显示各选项状态
if(checkall.checked){ //如果全选框被选中，各选项被选中
option[i].checked=true;
}else{ //如果全选框未被选中，各选项也不被选中
option[i].checked=false;
}
}
}
//input的checked属性规定input元素首次加载时应当被选中。
</script>
</head>
<body>
<div class="box">
<input type="checkbox" id="checkall" onclick="checkAll()" /><label for="checkall">全选</label><br />
<!-- <label>为表单控件定义标签 -->
<hr />
<input type="checkbox" name="option[]" />选项1<br />
<input type="checkbox" name="option[]" />选项2<br />
<input type="checkbox" name="option[]" />选项3<br />
<input type="checkbox" name="option[]" />选项4<br />
<input type="checkbox" name="option[]" />选项5<br />
<input type="checkbox" name="option[]" />选项6<br />
</div>
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-02-27 09:11:08
Teacher's summary：写的很不错了 全选在很多网站中都会使用到 不管是网站的前台还是后台基本上都会有 所以一定要好好掌握咯