html多選框，全選和全不選功能
阿新 • • 發佈：2021-10-28
<!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"> <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 type="text/javascript"> window.onload=function(){//網頁載入完成後呼叫函式 var oA=document.getElementsByTagName("a")[0];//獲取第一個a元素，即連結"反選" var oInput=document.getElementsByTagName("input");//獲取所有的輸入選擇框 var oLabel=document.getElementsByTagName("label")[0];//獲取第一個lable標籤，lable標籤為input標籤定義標記，即"全選"選項。 var isCheckAll=function( ){//宣告一個全選函式 for(var i=1,n=0;i<oInput.length;i++){//從i=1迴圈，排除第一個選項"全選“，從選項1開始迴圈。 oInput[i].checked && n++//沒選擇一個選項，則n增加1，n=已選的專案數 } oInput[0].checked=n==oInput.length-1;//選擇第一個選項=選擇第一個專案之外的全部選項，所以點選全選的同時，其他所有選項一併選中。 oLabel.innerHTML = oInput[0].checked ? "全不選" : "全選"//innerHtml改變第一個標籤"全選'的元素內容，後面為判斷語句：選擇"全選"時，全選變為全不選，否則為全選。 }; oInput[0].onclick=function(){//給第一個選項"全選"繫結點選函式事件,點選全選時，執行函式 for(var i=1;i<oInput.length;i++){ oInput[i].checked=this.checked//當點選第一個"全選"選項時，執行迴圈函式:遍歷選擇每個選項，即點選全選時，所有選項都選擇，實現全選，同理實現全不選，這裡的this即為oInput[0]，將第一個input的checked值賦給每一個input元素。 } isCheckAll() }; oA.onclick=function(){//給"反選"繫結點選事件，當點選反選時，執行相應函式事件 for (var i = 1; i < oInput.length; i++){ oInput[i].checked=!oInput[i].checked//點選反選，已選變未選，未選變已選，!為否定 }; } for (var i = 1; i < oInput.length; i++) {//點選改變元素 oInput[i].onclick=function(){ isCheckAll()//oLabel.innerHTML = oInput[0].checked ? "全不選" : "全選"，根據選中個數更新全選框狀態，當全選後，全選切換為全不選。 }; } } </script> </html>
效果圖