首页 > 其他分享 >jquery002-全选反选取消

jquery002-全选反选取消

时间:2022-11-24 19:24:43浏览次数:41  
标签:function checkbox checked 1.2 tb1 反选 prop 全选 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>

标签:function,checkbox,checked,1.2,tb1,反选,prop,全选,jquery002
From: https://www.cnblogs.com/lfyxys/p/16922942.html

相关文章