jQuery 之 多選反選取消實例
阿新 • • 發佈：2019-04-02
ali else 技術分享 端口 checkbox 代碼 https src 展示 代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery3.js"></script> </head> <body> <table border="1"> <thead> <tr> <th style="text-align: center">選擇</th> <th style="text-align: center">IP</th> <th style="text-align: center">端口</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>2.2.2.2</td> <td>80</td> </tr> <tr> <td><input type="checkbox"></td> <td>3.3.3.3</td> <td>80</td> </tr> </tbody> </table> <input type="button" value="全選" onclick="checkAll()"> <input type="button" value="反選" onclick="reverseAll()"> <input type="button" value="取消" onclick="cancleAll()"> <script> function checkAll() { // 把checkbox的checked值設置為true $(‘:checkbox‘).prop(‘checked‘,true) // $(‘:checkbox‘).prop(‘checked‘）為獲取值 } function cancleAll() { // 把checkbox的checked值設置為false $(‘:checkbox‘).prop(‘checked‘,false) // $(‘:checkbox‘).prop(‘checked‘）為獲取值 } function reverseAll() { $(‘:checkbox‘).each(function (k) { // k當前索引 // this,DOM元素，當前循環的元素$(this) if(this.checked) { this.checked = false; } else{ this.checked = true; } }) } </script> </body> </html>
展示：
jQuery 之 多選反選取消實例