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