使用jQuery实现的复选框全选和全不选效果代码

使用jQuery实现的复选框全选和全不选效果代码:
复选框的全选和全不选效果在大量网站都有应用,可以说几乎绝大多数网站都有这样的功能,尤其是在批量进行管理的时候,下面就介绍一下如何利用jQuery实现此功能,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
function chkAll(obj) {
  var name = $(obj).attr("name");
  $(":checkbox").each(function () {
    this.checked = obj.checked;
  });
}
$(document).ready(function(){
  $(":checkbox[name=cAll]").click(function(){
    chkAll(this)
  })
})
</script>
</head>
<body>
<div >
  <input type="checkbox" name="cAll"/>全选/全不选</span>
  <input type="checkbox" name="antzone" value="蚂蚁部落一"/>蚂蚁部落一
  <input type="checkbox" name="antzone" value="蚂蚁部落二"/>蚂蚁部落二
  <input type="checkbox" name="antzone" value="蚂蚁部落三"/>蚂蚁部落三
  <input type="checkbox" name="antzone" value="蚂蚁部落四"/>蚂蚁部落四
</div>
</body>
</html>

以上代码实现了我们的要求,实现了全选和不全选效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=12283

更多内容可以参阅:http://www.softwhy.com/jquery/

你可能感兴趣的:(使用jQuery实现的复选框全选和全不选效果代码)