欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于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>

相關文章

最新評論