DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 基於JQuery實現CheckBox全選全不選
基於JQuery實現CheckBox全選全不選
編輯:JQuery特效代碼     
所以我就參照網上的例子試著自己寫了一個,達到了自己想要的效果,其實這也是一個很簡單的例子,其中有不足的地方還望大家能夠給予指出。
下面把代碼貼出來給大家看看
代碼如下:
<%@ 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");//判斷全選按鈕的狀態
$("[id$='Item']").each(function () {//查找每一個Id以Item結尾的checkbox
$(this).attr("checked", flag);//選中或者取消選中
});
});
//如果全部選中勾上全選框,全部選中狀態時取消了其中一個則取消全選框的選中狀態
$("[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>
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved