jQuery复选框全选和全不选效果
分类：实例代码
复选框的全选和全不选效果在代码中非常的常用，尤其在批量处理的需求中更是如此，下面就通过一个代码实例简单介绍一下如何实现此效果，希望能够对需要的朋友有所帮助，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>复选框全选和取消代码-前端教程网</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("#CheckAll").click(function(){
var flag=$(this).prop("checked");
if(flag){
$("#flag").text("取消");
}
else{
$("#flag").text("全选");
}
$("[name=subBox]:checkbox").each(function(){
$(this).prop("checked",flag);
})
})
})
</script>
</head>
<body>
<div>
<input id="CheckAll" type="checkbox" /><span id="flag">全选</span>
<input name="subBox" type="checkbox" />前端教程网一
<input name="subBox" type="checkbox" />前端教程网二
<input name="subBox" type="checkbox" />前端教程网三
<input name="subBox" type="checkbox" />前端教程网四
</div>
</body>
</html>
以上代码实现了我们的要求，能够实现复选框的全选和全部选效果，下面简单介绍一下实现过程。
一.实现原理:
（1）.点击第一个复选框实现全选和全不选:
当点击那个复选框的时候，能够获取此复选框的checked属性值，并且将其他的复选框的checked属性值设置为第一个复选框的checked属性值，这样就实现了全选和全不选效果。
（2）.提示文本的切换:
当第一个复选框的checked属性值为true的时候也就是全选中的时候，将span中的文本设置为取消，如果为false的时候设置为全选。
二.相关阅读:
（1）.click事件参阅jQuery click事件一章节。
（2）.prop()函数参阅jQuery prop()一章节。
（3）.prop()函数和attr()函数参阅prop()方法和attr()方法的区别一章节。
jQuery复选框全选和全不选效果，这样的场景在实际项目中还是用的比较多的，关于jQuery复选框全选和全不选效果就介绍到这了。
jQuery复选框全选和全不选效果属于前端实例代码，有关更多实例代码大家可以查看。