javascript教程系列41:表格全選反選,經典案例詳解
<!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
<!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>iPhone8</td> <td>8000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Pro</td> <td>5000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>iPad Air</td> <td>2000</td> </tr> <tr> <td> <input type="checkbox" /> </td> <td>Apple Watch</td> <td>2000</td> </tr> </tbody> </table> <input type="button" value=" 反 選 " id="btn"></div>
<script> // 整個全選,反選案例,可以分為三個需求// 1. 全選點擊時的邏輯 // 描述: 全選選中時,下面所有的都選中,否則,都不選中// 1.1 獲取元素 var j_cbAll = document.getElementById(‘j_cbAll‘); var tb = document.getElementById(‘j_tb‘); var cbs = tb.getElementsByTagName(‘input‘);// console.log(cbs);// 1.2 給全選復選框註冊點擊事件 j_cbAll.onclick = function(){ // 1.3 在事件處理函數中, 讓下面的都選中,獲取都不選中// 如何判斷全選有沒有被選中?// console.log(j_cbAll.checked); // if(j_cbAll.checked){// //說明全選選中了,那麽下面的都選中////// cbs[0].checked = true;//// cbs[1].checked = true;//// cbs[2].checked = true;//// cbs[3].checked = true;// for(var i = 0; i < cbs.length; i++) {// cbs[i].checked = true;// }//// }else{// //說明全選沒選中,那麽下面的都不選中// for(var i = 0; i < cbs.length; i++) {// cbs[i].checked = false ;// }// } //優化後: for(var i = 0; i < cbs.length; i++) { cbs[i].checked = j_cbAll.checked; } } // 2. 下面的單個的復選框點擊時的邏輯 // 我們應該在每一個單個復選框點擊的時候,都去判斷一下,其他的單個的復選框是否都被選中了 //2.1 給每一個單個復選框註冊點擊事件 for(var i = 0; i < cbs.length; i++) { cbs[i].onclick = cbClick; //為了節省內存,將函數申明放到for循環外面 } //當點擊單個復選框時,要觸發的函數 function cbClick(){ // 2.2 在事件處理函數中,判斷每一個是否都選中,如果都選中,則全選也選中,否則,全選不選中 //2.2.1 判斷所有的單個復選框是否都選中了 var flag = true; //用於判斷是否都選中,假設都選中的狀態 for(var i = 0; i < cbs.length; i++) {// if(cbs[i].checked == false) {// //證明有未選中的// flag = false;// } if(!cbs[i].checked) {// //證明有未選中的 flag = false; break; //如果已經查到有未選中的了,就沒有必須要在往下查看了 } } //2.2.2 根據之前判斷的結果,給全選框賦值// if(flag == true){// j_cbAll.checked = true;// }else{// j_cbAll.checked = false;// } j_cbAll.checked = flag; } // 3. 反選點擊時的邏輯 // 點擊反選按鈕,讓單個的復選框取反, 之後, 判斷是不是全部都選中了,如果都選中則,全選按鈕也要選中,否則,全選按鈕不選中// 3.1 給反選按鈕註冊事件 document.getElementById(‘btn‘).onclick = function(){ // 3.2 事件處理函數中,讓單個復選框取反 for(var i = 0; i < cbs.length; i++) { cbs[i].checked = !cbs[i].checked; }// 3.3 取反之後,判斷每一個單個的復選框是否都選中 cbClick(); }
</script></body>
</html>
javascript教程系列41:表格全選反選,經典案例詳解