您当前的位置: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 <input type="button" value="全选" onclick="checkAll()"> 9 <input type="button" value="反选" onclick="reverseAll()"> 10 <input type="button" value="取消" onclick="cancleAll()"> 11 <table border="1"> 12 <thead> 13 <tr> 14 <th>选择</th> 15 <th>IP</th> 16 <th>端口</th> 17 </tr> 18 </thead> 19 <tbody> 20 <tr> 21 <td><input type="checkbox"></td> 22 <td>1.1.1.1</td> 23 <td>80</td> 24 </tr> 25 <tr> 26 <td><input type="checkbox"></td> 27 <td>1.1.1.1</td> 28 <td>80</td> 29 </tr> 30 <tr> 31 <td><input type="checkbox"></td> 32 <td>1.1.1.1</td> 33 <td>80</td> 34 </tr> 35 <tr> 36 <td><input type="checkbox"></td> 37 <td>1.1.1.1</td> 38 <td>80</td> 39 </tr> 40 <tr> 41 <td><input type="checkbox"></td> 42 <td>1.1.1.1</td> 43 <td>80</td> 44 </tr> 45 </tbody> 46 47 </table> 48 <script type="text/javascript" src='jquery-3.2.1.js'></script> 49 <script type="text/javascript"> 50 function checkAll(){ 51 $(':checkbox').prop('checked',true); 52 } 53 function cancleAll() { 54 $(':checkbox').prop('checked',false); 55 } 56 function reverseAll(){ 57 $(':checkbox').each(function(){ 58 var v = $(this).prop('checked')? false:true; /*三元运算： var v = 条件? 真值:假值*/ 59 $(this).prop('checked',v) 60 }) 61 } 62 </script> 63 </body> 64 </html>