1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="jquery-3.2.1.js"></script> 7 </head> 8 <body> 9 <button onclick="changeall()">正选</button> 10 <button onclick="reverse()">反选</button> 11 <button onclick="cancel()">取消</button> 12 13 <table border="5"> 14 <tr> 15 <td>111</td> 16 <td><input type="checkbox" class="box"></td> 17 </tr> 18 <tr> 19 <td>222</td> 20 <td ><input type="checkbox" class="box"></td> 21 </tr> 22 <tr> 23 <td>333</td> 24 <td><input type="checkbox" class="box"></td> 25 </tr> 26 <tr> 27 <td>444</td> 28 <td ><input type="checkbox" class="box"></td> 29 </tr> 30 </table> 31 <script> 32 function changeall() { 33 $("table input").each(function () { //找到input标签后进行遍历 把所有的input都加上checked 选中状态 34 $(this).prop("checked",true); 35 36 }) 37 } 38 function cancel() { //找到input标签后进行遍历 把所有的input都取消checked状态 39 $("table input").each(function () { 40 $(this).prop("checked",false); 41 }) 42 } 43 function reverse() { 44 $("table input").each(function () { //遍历循环input 45 if ($(this).prop("checked")){ // 如果有checked 46 $(this).prop("checked",false); // 用false取消 47 } 48 else { //如果没有 49 ($(this).prop("checked", true)); //加上checked状态 50 } 51 }) 52 } 53 </script> 54 </body> 55 </html>