線上選課案例—通過js實現全選,全不選和多選效果。順便談談理解的半吊子flag這個變數
阿新 • • 發佈:2018-11-10
要點:
1.首先分為兩個業務邏輯的模組,首先 全選/取消全選 的按鈕會的選中的狀態或者沒有選中,他的返回值是Boolean型別,也就是說通過通過這個通過全選按鈕將其Boolean型別的值,通過迴圈賦值給全選框下面所有的單選按鈕
2.再單選按鈕執行之前,將所有的單選按鈕狀態做一次判斷,判斷是否存在一個沒有選中的狀態的按鈕,如果有立即停止迴圈,並將結果返回給flag,作為多選框不會被選中的標誌。flag這個變數,java的程式設計中,經常使用。一般來說,只有程式的狀態是不明確的,或者需要使用者互動操作的情況下,通過設定一個flag變數來作為標緻再合適不過。
程式碼:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>課程</th> <th>學分</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>node</td> <td>5</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>java</td> <td>6</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>c#</td> <td>4</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>python</td> <td>1</td> </tr> </tbody> </table> </div> <script> function my$(id){ return document.getElementById(id); } var cbAll = my$("j_cbAll"); // 全選按鈕的複選框 var cbs = my$("j_tb").getElementsByTagName("input"); // table下面所有小的複選框 cbAll.onclick = function(){ for(var i=0; i<cbs.length; i++){ cbs[i].checked = this.checked; } // 當上面全選按鈕被點選時,將他的checked狀態全部賦值給下面所有的子元素 }; for(var i=0; i<cbs.length; i++){ cbs[i].onclick = function(){ var flag = true; // 全選按鈕狀態的標誌 for(var j=0; j<cbs.length; j++){ if(!cbs[j].checked){ flag = false; break; // 每次下面的小選框被選中時,執行迴圈遇到一個沒有被選中的就跳出迴圈 } } cbAll.checked = flag; } }; </script> </body> </html>
效果: