基于JQuery實現(xiàn)CheckBox全選全不選

更新時間：2011年06月27日 01:06:24 作者：

做項目時需要實現(xiàn)CheckBox的全選，我想用JQuery實現(xiàn)，從網(wǎng)上找了找，網(wǎng)上的確有很多例子，但都不能實現(xiàn)我想要的全部效果

所以我就參照網(wǎng)上的例子試著自己寫了一個，達到了自己想要的效果，其實這也是一個很簡單的例子，其中有不足的地方還望大家能夠給予指出。
下面把代碼貼出來給大家看看

 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="checkAll.aspx.cs" Inherits="checkAll" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script src="Js/jquery-1.5.2.js" type="text/javascript"></script> 
<script src="Js/jquery-1.5.2.min.js" type="text/javascript"></script> 
<script language="javascript" type="text/javascript"> 
$(document).ready(function () { 
//全選或全不選 
$("#chkAll").click(function () {//當點擊全選框時 
var flag = $("#chkAll").attr("checked");//判斷全選按鈕的狀態(tài) 
$("[id$='Item']").each(function () {//查找每一個Id以Item結尾的checkbox 
$(this).attr("checked", flag);//選中或者取消選中 
}); 
}); 
//如果全部選中勾上全選框，全部選中狀態(tài)時取消了其中一個則取消全選框的選中狀態(tài) 
$("[id$='Item']").each(function () { 
$(this).click(function () { 
if ($("[id$='Item']:checked").length == $("[id$='Item']").length) { 
$("#chkAll").attr("checked", "checked"); 
} 
else $("#chkAll").removeAttr("checked"); 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chkAll" runat="server" Text="全選"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk1_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk2_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk3_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk4_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk5_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk6_Item" runat="server"/> 
</td> 
</tr> 
<tr> 
<td width="100px"> 
<asp:CheckBox ID="chk7_Item" runat="server"/> 
</td> 
</tr> 
</table> 
</div> 
</form> 
</body> 
</html> 