jQuery CheckBox全选、全不选实现代码小结

178 阅读 0 评论 118 点赞

我是靠谱客的博主稳重花生，最近开发中收集的这篇文章主要介绍jQuery CheckBox全选、全不选实现代码小结，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

直接上代码。

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

下面的代码比较全，是基于js的控制原理实现

复制代码代码如下:

<script src="http://img.uoften.com/jslib/jquery/jquery14.js"></script> 
<script type="text/javascript"> 
//全选 
function CheckedAll(){ 
$(':checkbox').attr('checked','checked'); 
} 

//全不选 
function CheckedNo(){ 
$(':checkbox').attr('checked',''); 
} 

//反选 
function CheckedRev(){ 
var arr = $(':checkbox'); 
for(var i=0;i<arr.length;i++){ 
arr[i].checked = ! arr[i].checked; 
} 
} 
</script> 
<body> 
<div> 
<input id="CheckAll" type="checkbox" /> 
<input name="subBox" type="checkbox" /> 
<input name="subBox" type="checkbox" /> 
<input name="subBox" type="checkbox" /> 
<input name="subBox" type="checkbox" /> 
</div> 
<input type="button" name="btnCheckedAll" value="全　选" onclick="javascript：CheckedAll();" /> 
<input type="button" name="btnCheckedNo" value="全不选" onclick="javascript：CheckedNo();" /> 
<input type="button" name="btnCheckedRev" value="反　选" onclick="javascript：CheckedRev();" /> 
</body> 