代码:

<!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 >选择</th> <th >IP</th> <th >端口</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>展示: