搜索

jquery002-全选反选取消


发布时间: 2022-11-24 19:19:00    浏览次数:43 次
<!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>
免责声明 jquery002-全选反选取消,资源类别:文本, 浏览次数:43 次, 文件大小:-- , 由本站蜘蛛搜索收录2022-11-24 07:19:00。此页面由程序自动采集,只作交流和学习使用,本站不储存任何资源文件,如有侵权内容请联系我们举报删除, 感谢您对本站的支持。 原文链接:https://www.cnblogs.com/lfyxys/p/16922942.html