JavaScript表格的全選和不選
阿新 • • 發佈：2018-11-12
全選和全不選步驟分析:
1.確定事件: onclick 單機事件
2.事件觸發函式: checkAll()
3.函式要去做一些事情:
獲得當前第一個checkbox的狀態
獲得所有分類項的checkbox
修改每一個checkbox的狀態
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>01表格全選和不選</title> <!-- 表格隔行換色分析: 1. 確定事件: 文件載入完成 onload 2. 事件要觸發函式: init() 3. 函式:操作頁面的元素 要操作表格中每一行 動態的修改行的背景顏色 --> <script> function init(){ //得到表格 var tab = document.getElementById("tab"); //得到表格中每一行 var rows = tab.rows; //遍歷所有的行,然後根據奇數 偶數,使行得到不同顏色 //標題行換色 for(var i=0; i < rows.length; i++){ var row = rows[i]; //得到其中的某一行 if(i%2==0){ row.bgColor = "yellow"; }else{ row.bgColor = "red"; } } //標題行不換色 // for(var i=1; i < rows.length; i++){ // var row = rows[i]; //得到其中的某一行 // if(i%2==0){ // row.bgColor = "yellow"; // }else{ // row.bgColor = "red"; // } // } } /* 全選和全不選步驟分析: 1.確定事件: onclick 單機事件 2.事件觸發函式: checkAll() 3.函式要去做一些事情: 獲得當前第一個checkbox的狀態 獲得所有分類項的checkbox 修改每一個checkbox的狀態 */ function checkAll(){ // 獲得當前第一個checkbox的狀態 var check1 = document.getElementById("check1"); //得到當前checked狀態 var checked = check1.checked; // 獲得所有分類項的checkbox // var checks = document.getElementsByTagName("input"); var checks = document.getElementsByName("checkone"); // alert(checks.length); for(var i = 0; i < checks.length; i++){ // 修改每一個checkbox的狀態 var checkone = checks[i]; checkone.checked = checked; } } </script> </head> <body onload="init()"> <table border="1px" width="600px" id="tab"> <tr> <td> <input type="checkbox" onclick="checkAll()" id="check1"/> </td> <td>分類ID</td> <td>分類名稱</td> <td>分類商品</td> <td>分類描述</td> <td>操作</td> </tr> <tr> <td> <input type="checkbox" name="checkone" /> </td> <td>1</td> <td>手機數碼</td> <td>手機</td> <td>手機特賣</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" name="checkone"/> </td> <td>2</td> <td>鞋靴箱包</td> <td>箱包</td> <td>日常家用</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" name="checkone"/> </td> <td>3</td> <td>美酒美食</td> <td>美酒</td> <td>葡萄酒</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" name="checkone"/> </td> <td>4</td> <td>衣服特賣</td> <td>衣服</td> <td>什麼樣的衣服都有</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> <tr> <td> <input type="checkbox" name="checkone"33/> </td> <td>5</td> <td>美妝賣場</td> <td>美妝</td> <td>各式各樣的美妝產品</td> <td> <a href="#">修改</a> <a href="#">刪除</a> </td> </tr> </table> </body> </html>