jquery002-全选反选取消

管理员
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body style="width: 980px;margin: 0 auto">
<input id="i1" type="button" value="全选" onclick="checkAll()"/>
<input id="i2" type="button" value="反选"/>
<input id="i3" type="button" value="取消"/>
<table border="1">
<thead>
<tr>
<th>操作</th>
<th>IP</th>
<th>PORT</th>
</tr>
</thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox"/></td>
<td>1.2.3.4</td>
<td>66</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.2.3.4</td>
<td>66</td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>1.2.3.4</td>
<td>66</td>
</tr>
</tbody>

</table>
<script src="jquery3.6.1.js"></script>
<script>
function checkAll(){
$('#tb1 :checkbox').prop('checked',true);
}

var cancelALL = function (){
$('#tb1 :checkbox').prop('checked',false);
}

$('#i3').on('click',cancelALL);

var reverseAll = function (){
//'#tb1 :checkbox' 中间要有空格
//this是DOM对象,用jquery方法要用$(this)
$('#tb1 :checkbox').each(function (){
var res = $(this).prop('checked')?false:true;
$(this).prop('checked',res);
})
}
//on('click',reverseAll) 函数不用加括号,如果是在标签中绑定要加括号
$('#i2').on('click',reverseAll);






</script>
</body>
</html>