<!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>
