[读码时间] 复选框选择
说明:代码取自网络,注释为笔者学习时添加!
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>复选框选择</title> <style> body,dl,dt,dd,p{ /*清除内外边距*/ margin:0; padding:0; } body{ font-family:Tahoma; font-size:12px; } label,input,a{ vertical-align:middle;/*垂直居中*/ } label{ padding:0 10px 0 5px; } a{ color:#09f;/*蓝色*/ text-decoration:none; } a:hover{ color:red; } dl{ width:120px; margin:10px auto;/*左右置中*/ padding:10px 5px; border:1px solid #666;/*黑色*/ border-radius:5px;/*圆角*/ background:#fafafa;/*白色*/ } dt{ padding-bottom:10px;/*下内边距*/ border-bottom:1px solid #666;/*黑色*/ } dt label{ font-weight:700;/*字体粗细*/ } p{ margin-top:10px;/*上外边距*/ } </style> <script> window.onload = function () { var oA = document.getElementsByTagName("a")[0];//获取a元素中的第一个 var oInput = document.getElementsByTagName("input");//获取所有input元素引用 var oLabel = document.getElementsByTagName("label")[0];//获取label元素中的第一个 var isCheckAll = function () {//检测所有选项是否全部被选中 for (var i = 1, n = 0; i < oInput.length; i++) {//n为计数器,留意i的值从1开始 oInput[i].checked && n++; //遍历检测每个input元素的checked值,如勾选,则n加1 } oInput[0].checked = n == oInput.length - 1;//如计数器n的值等同所有input元素的数量,则第一个input被选中,即全选按钮 oLabel.innerHTML = oInput[0].checked ? "全不选" : "全选";//切换文本 }; oInput[0].onclick = function () {//给全选按钮添加click事件 for (var i = 1; i < oInput.length; i++) {//留意i的值从1开始 oInput[i].checked = this.checked; } isCheckAll(); }; oA.onclick = function () { //给反选按钮添加click事件 for (var i = 1; i < oInput.length; i++) {//留意i的值从1开始 oInput[i].checked = !oInput[i].checked;//反转选中状态 } isCheckAll(); }; for (var i = 1; i < oInput.length; i++) { //监控选项个数,更新全选框状态.留意i的值从1开始 oInput[i].onclick = function () { isCheckAll(); } } } </script> </head> <body> <!--定义列表--> <dl> <dt><input type="checkbox" id="checkAll" /><label>全选</label><a href="javascript:;">反选</a></dt> <dd> <p><input type="checkbox" name="item" /><label>选项 (一)</label></p> <p><input type="checkbox" name="item" /><label>选项 (二)</label></p> <p><input type="checkbox" name="item" /><label>选项(三)</label></p> <p><input type="checkbox" name="item" /><label>选项(四)</label></p> <p><input type="checkbox" name="item" /><label>选项(五)</label></p> <p><input type="checkbox" name="item" /><label>选项(六)</label></p> <p><input type="checkbox" name="item" /><label>选项(七)</label></p> <p><input type="checkbox" name="item" /><label>选项(八)</label></p> <p><input type="checkbox" name="item" /><label>选项(九)</label></p> <p><input type="checkbox" name="item" /><label>选项(十)</label></p> </dd> </dl> </body> </html>