<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
/*浏览器格式化，消除页面预留空间*/
*{
margin: 0;
padding: 0;
}
/*适应各种浏览器屏幕尺寸*/
body{
width: 100%;
height: 100%;
/*设置页面字体大小*/
font-size: 14px;
}
/*列表内元素垂直居中*/
label,input,a{vertical-align:middle;}
/*给选项表示设置内边距*/
label{padding:0 10px 0 5px;}
/*给列表设置边框*/
dl{
width: 120px;
/*元素水平居中*/
margin: 10px auto;
border: 1px solid #666;
/*设置边框圆角*/
border-radius: 5px;
background: #fafafa;
padding: 10px 5px;
}
/*消除链接下划线，设置链接字体颜色*/
a{
text-decoration: none;
color: #09f;
}
/*鼠标指针浮动在链接上时，样式改变:字体变红色*/
a:hover{
color: red;
}
dt{
/*下边框*/
border-bottom: 1px solid black;
/*距离底部内边距*/
padding-bottom: 10px;
}
/*标示字体加粗*/
dt label{
font-weight: 700;
}
/*各个选项距离顶部外边距*/
p{
margin-top: 10px;
}<br></style>
<body>
<dl class="checkBox">
<dt><input type="checkbox" id="checkAll" onclick="checkAll()">
<label>全选</label>
<a href="javascript:;">反选</a>
</dt>
<dd>
<p><input type="checkbox" name="item[]"><label>选项1</label></p>
<p><input type="checkbox" name="item[]"><label>选项2</label></p>
<p><input type="checkbox" name="item[]"><label>选项3</label></p>
<p><input type="checkbox" name="item[]"><label>选项4</label></p>
<p><input type="checkbox" name="item[]"><label>选项5</label></p>
<p><input type="checkbox" name="item[]"><label>选项6</label></p>
<p><input type="checkbox" name="item[]"><label>选项7</label></p>
<p><input type="checkbox" name="item[]"><label>选项8</label></p>
</dd>
</dl>
<center>1、切换全选全不选文字2、根据选中个数更新全选框状态</center>
</body>
<script>
function checkAll(){
//1.获取编号前面的复选框
var checkAllEle = document.getElementById("checkAll");
//2.对编号前面复选框的状态进行判断
if(checkAllEle.checked==true){
//3.获取下面所有的复选框
var checkOnes = document.getElementsByName("item[]");
//4.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//5.拿到每一个复选框，并将其状态置为选中
checkOnes[i].checked=true;
}
}else{
//6.获取下面所有的复选框
var checkOnes = document.getElementsByName("item[]");
//7.对获取的所有复选框进行遍历
for(var i=0;i<checkOnes.length;i++){
//8.拿到每一个复选框，并将其状态置为未选中
checkOnes[i].checked=false;
}
}
}
</script>
</html>
