文章目錄
- 一、核心要點解析 - 表格全選復選框案例
- 1、案例需求
- 2、復選框設置
- 3、獲取 全選復選框 和 普通復選框
- 4、設置 全選復選框 邏輯
- 5、設置 普通復選框 邏輯
- 二、完整代碼示例
- 1、代碼示例
- 2、執行結果
一、核心要點解析 - 表格全選復選框案例
1、案例需求
在表格中 , 設置 多個 checkbox 復選框 表單 , 標題中的 復選框 是 " 全選復選框 " , 普通 表格行 中的 復選框 是 " 普通復選框 " , 受 全選復選框 控制 ;
2、復選框設置
復選框 是 input 表單 , 將 表單的 type 類型屬性 設置為 checkbox , 就是設置了一個復選框 ;
<input type="checkbox" />
在 table 表格 中的 thead 標簽元素 , 就是 表格的標題 , 在 該標簽下 , 設置 " 全選復選框 " , 該 全選復選框 設置一個 id 屬性 , 方便查找到該 元素 ;
<thead><tr><td><input type="checkbox" id="j_cbAll" /></td><th>姓名</th><th>年齡</th></tr></thead>
table 表格 中 tbody 標簽 是 表格 的 內容 , 在 該標簽下 , 設置 " 普通復選框 " ; 下面的代碼中設置了 3 個普通復選框 ;
<tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>Tom</td><td>18</td></tr><tr><td><input type="checkbox" /></td><td>Jerry</td><td>12</td></tr><tr><td><input type="checkbox" /></td><td>Trump</td><td>74</td></tr></tbody>
3、獲取 全選復選框 和 普通復選框
通過 id 選擇器 , 調用 Document 對象的 getElementById , 獲取對應 id 的標簽 ;
" 全選復選框 " 元素 直接通過 調用 document.getElementById('j_cbAll') 代碼即可獲得 ;
" 普通復選框 " 元素 都定義在 table 表格的 <tbody id="j_tb"> 標簽下 , 先通過 document.getElementById('j_tb') 獲取 <tbody id="j_tb"> 標簽元素 , 然后 通過 標簽選擇器 獲取 tbody 標簽下的 input 標簽元素 ;
完整代碼如下 :
// 獲取 表格標題 中的 全選按鈕復選框 元素 , 只有一個元素var j_cbAll = document.getElementById('j_cbAll');// 獲取 標題內容 中的 普通按鈕復選框 元素 , 有多個該元素var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');
4、設置 全選復選框 邏輯
全選復選框 邏輯 , 就是 全選 和 取消全選 ;
- 全選復選框 選中 , 則 普通復選框 全部選中 ;
- 全選復選框 取消選中 , 則 普通復選框 全部取消選中 ;
就是 為所有的 普通復選框 設置 全選按鈕復選框 的 選中狀態 , true 是選中 , false 是未選中 ;
代碼示例 :
// 注冊 全選 和 取消全選 事件j_cbAll.onclick = function() {// 為所有的 普通復選框 設置 全選按鈕復選框 的 選中狀態 , true 是選中 , false 是未選中for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}
5、設置 普通復選框 邏輯
普通復選框 邏輯 如下 : 通過 普通復選框 的操作 , 影響 全選復選框 的 選中狀態 ;
- 全選復選框 選中 : 表格 中的 普通復選框 全部選中 , 表格標題 中的 全選復選框 才會選中 ;
- 全選復選框 取消選中 : 為所有 普通復選框綁定點擊事件 , 每次點擊改變選中狀態 , 循環檢查 所有的 普通復選框 是否 有沒有選中的 , 如果有任意一個沒有選中 , 則 取消 全選復選框 的 選中狀態
代碼示例 :
// 2. 普通復選框 邏輯 : // 全選復選框 選中 : 表格 中的 普通復選框 全部選中 , 表格標題 中的 全選復選框 才會選中 ; // 全選復選框 取消選中 : 為所有 普通復選框綁定點擊事件 , 每次點擊改變選中狀態 , 循環檢查 所有的 普通復選框 是否 有沒有選中的 , 如果有任意一個沒有選中 , 則 取消 全選復選框 的 選中狀態for (var i = 0; i < j_tbs.length; i++) {// 為 所有的 普通復選框 循環設置 點擊狀態j_tbs[i].onclick = function() {// 設置 全選復選框 的 選中狀態 , 默認為 truevar flag = true;// 任意一個 普通復選框 點擊 , 不管是 選中 還是 取消選中 , 都要檢查 當前 是否全部選中 , // 如果 是 則 全選復選框 設置為 選中狀態 // 如果 不是 則 全選復選框 設置為 取消選中狀態for (var i = 0; i < j_tbs.length; i++) {// 只要有一個 普通復選框 沒有選中 , 則 全選復選框 的 選中狀態 就設置成了 falseif (!j_tbs[i].checked) {flag = false;break;}}j_cbAll.checked = flag;}}
二、完整代碼示例
1、代碼示例
完整代碼示例 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Inline Style Operation Example</title><style>* {/* 取消默認內外邊距樣式 */margin: 0;padding: 0;}table {width: 400px;margin: 50px auto;text-align: center;border-collapse: collapse;font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: pink;}</style>
</head><body><table><thead><tr><td><input type="checkbox" id="j_cbAll" /></td><th>姓名</th><th>年齡</th></tr></thead><tbody id="j_tb"><tr><td><input type="checkbox" /></td><td>Tom</td><td>18</td></tr><tr><td><input type="checkbox" /></td><td>Jerry</td><td>12</td></tr><tr><td><input type="checkbox" /></td><td>Trump</td><td>74</td></tr></tbody></table><script>// 1.獲取元素 獲取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循環綁定注冊事件for (var i = 0; i < trs.length; i++) {// 3. 鼠標經過事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠標離開事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}// 獲取 表格標題 中的 全選按鈕復選框 元素 , 只有一個元素var j_cbAll = document.getElementById('j_cbAll');// 獲取 標題內容 中的 普通按鈕復選框 元素 , 有多個該元素var j_tbs = document.getElementById('j_tb').getElementsByTagName('input');// 1. 全選 和 取消全選 // 注冊 全選 和 取消全選 事件j_cbAll.onclick = function() {// 為所有的 普通復選框 設置 全選按鈕復選框 的 選中狀態 , true 是選中 , false 是未選中for (var i = 0; i < j_tbs.length; i++) {j_tbs[i].checked = this.checked;}}// 2. 普通復選框 邏輯 : // 全選復選框 選中 : 表格 中的 普通復選框 全部選中 , 表格標題 中的 全選復選框 才會選中 ; // 全選復選框 取消選中 : 為所有 普通復選框綁定點擊事件 , 每次點擊改變選中狀態 , 循環檢查 所有的 普通復選框 是否 有沒有選中的 , 如果有任意一個沒有選中 , 則 取消 全選復選框 的 選中狀態for (var i = 0; i < j_tbs.length; i++) {// 為 所有的 普通復選框 循環設置 點擊狀態j_tbs[i].onclick = function() {// 設置 全選復選框 的 選中狀態 , 默認為 truevar flag = true;// 任意一個 普通復選框 點擊 , 不管是 選中 還是 取消選中 , 都要檢查 當前 是否全部選中 , // 如果 是 則 全選復選框 設置為 選中狀態 // 如果 不是 則 全選復選框 設置為 取消選中狀態for (var i = 0; i < j_tbs.length; i++) {// 只要有一個 普通復選框 沒有選中 , 則 全選復選框 的 選中狀態 就設置成了 falseif (!j_tbs[i].checked) {flag = false;break;}}j_cbAll.checked = flag;}}</script>
</body></html>
2、執行結果
靜態結果 :
完整執行過程 :
