checkbox功能实现之全选反选取消
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox功能实现之全选反选取消相关的知识，希望对你有一定的参考价值。
实例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="全选" />
<input type="button" value="反选" />
<input type="button" value="取消" />
<table border="1">
<thead></thead>
<tbody id="tb1">
<tr>
<td><input type="checkbox" /></td>
<td>11</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>22</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>33</td>
</tr>
</tbody>
</table>
<script src="jquery-3.1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
function CheckAll(){
// $(‘#tb1‘).find(‘:checkbox‘).attr(‘checked‘,‘checked‘);
$(‘#tb1‘).find(‘:checkbox‘).prop(‘checked‘,true);
// attr和prop区别，attr是针对所有的标签属性进行设置，prop是check和radio复选框的专门属性设置
}
function CheckReverse(){
//找，如果选中了，取消;未选中，则选中；
$(‘#tb1‘).find(‘:checkbox‘).each(function(){
//$(this) 每一个复选框
//$(this).prop()，如果选中了，则用true,否则用false
//attr如果选中;checked,checked=checked
if($(this).prop(‘checked‘)){
$(this).prop(‘checked‘,false);
}else{
$(this).prop(‘checked‘,true);
}
});
}
function CheckCancel(){
// $(‘#tb1‘).find(‘:checkbox‘).removeAttr(‘checked‘);
$(‘#tb1‘).find(‘:checkbox‘).prop(‘checked‘,false);
}
</script>
</body>
</html>
本文出自 “平平淡淡才是真” 博客，请务必保留此出处http://ucode.blog.51cto.com/10837891/1847218
以上是关于checkbox功能实现之全选反选取消的主要内容，如果未能解决你的问题，请参考以下文章
js 脚本怎样实现checkbox的全选，反选，类似邮箱中邮件的全选后删除移动