JavaScript實現全選或反選功能
阿新 • • 發佈:2021-08-20
本文例項為大家分享了實現全選或反選功能的具體程式碼,供大家參考,具體內容如下
程式碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例--表格全選</title> <style> table { border: 1px solid; margin: auto; width: 500px; } td,th { text-align: center; border: 1px solid; } .out { backgrounhttp://www.cppcns.comd-color: white; } .over { background-color: pink; } div{ margin-top: 10px; text-align: center; } </style> <script> window.onload = function () { //全選 document.getElementById("checkAll").onclick = function () { var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = true; } } //全不選 document.getElementById("unCheckAll").onclick = function () { var cbs = document.getElementsByName("cb"lCKWibJr); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = false; } } //反選 document.getElementById("reCheck").onclick = function () { var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = !cbs[i].checked; } } //滑鼠經過,顏色變化 var trs = document.getElementsByTagName("tr"); for (var i = 0; i < trs.length; i++) { trs[i].onmouseover = function () { this.className = "over"; } trs[i].onmouseout = function () { this.className = "out"; } } //選中頂部複選框,全選 document.getElementById("firstCb").onclick = function () { var cbs = document.getElementsByName("cb"); for (var i = 0; i < cbs.length; i++) { cbs[i].checked = this.checked; } } } </script> </head> <body> <table> <caption>學生資訊表</caption> <tr> <td><input type="checkbox" name="cb" id="firstCb"></td><td>編號</td> <td>姓名</td> <td>性別</td> <td>操作</td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>1</td> <td>令狐沖</td> <td>男</td> <td><a href="script:void(0);" onclick="delTr(this)">刪除</a></td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>2</td> http://www.cppcns.com <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this)">刪除</a></td> </tr> <tr> <td><input type="checkbox" name="cb"></td> <td>3</td> <td>嶽不群</td> <td>?</td> <td><a href="javascript:void(0);" onclick="delTr(this)">刪除</a></td> </tr> </table> <div> <input type="button" value="全選" id="checkAll"> <input type="button" value="全不選" id="unCheckAll"> <input type="button" value="反選" id="reCheck"> </div> </body> </html>
執行結果
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。