ASP.NET jQuery 實(shí)例6 (實(shí)現(xiàn)CheckBoxList成員全選或全取消)
更新時間：2012年01月13日 22:36:05 作者：
ASP.NET jQuery 實(shí)例6 (實(shí)現(xiàn)CheckBoxList成員全選或全取消) ，需要的朋友可以參考下。
這章內(nèi)容比較簡單，直接上頁面代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe6.aspx.cs" Inherits="Recipe6" %>
<!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>Recipe6</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#<%=chkSelectAll.ClientID %>").click(function () {
// 很簡單，一行代碼搞定
$("#<%=chkList.ClientID %> input[type=checkbox]").attr("checked", $("#<%=chkSelectAll.ClientID %>").is(":checked"));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="left">
<p>
實(shí)現(xiàn)全選或全取消操作</p>
<fieldset style="width: 400px; height: 150px;">
<asp:CheckBox ID="chkSelectAll" runat="server" Text="全選" />
<hr />
<asp:CheckBoxList ID="chkList" runat="server">
<asp:ListItem Value="1" Text="C#"></asp:ListItem>
<asp:ListItem Value="2" Text="Java"></asp:ListItem>
<asp:ListItem Value="3" Text="C++"></asp:ListItem>
<asp:ListItem Value="4" Text="JavaScript"></asp:ListItem>
</asp:CheckBoxList>
</fieldset>
</div>
</form>
</body>
</html>
復(fù)制代碼 代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe6.aspx.cs" Inherits="Recipe6" %>
<!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>Recipe6</title>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#<%=chkSelectAll.ClientID %>").click(function () {
// 很簡單，一行代碼搞定
$("#<%=chkList.ClientID %> input[type=checkbox]").attr("checked", $("#<%=chkSelectAll.ClientID %>").is(":checked"));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="left">
<p>
實(shí)現(xiàn)全選或全取消操作</p>
<fieldset style="width: 400px; height: 150px;">
<asp:CheckBox ID="chkSelectAll" runat="server" Text="全選" />
<hr />
<asp:CheckBoxList ID="chkList" runat="server">
<asp:ListItem Value="1" Text="C#"></asp:ListItem>
<asp:ListItem Value="2" Text="Java"></asp:ListItem>
<asp:ListItem Value="3" Text="C++"></asp:ListItem>
<asp:ListItem Value="4" Text="JavaScript"></asp:ListItem>
</asp:CheckBoxList>
</fieldset>
</div>
</form>
</body>
</html>
效果圖：
您可能感興趣的文章:
- asp.net Javascript獲取CheckBoxList的value
- asp.net+jquery滾動滾動條加載數(shù)據(jù)的下拉控件
- ASP.NET jQuery 實(shí)例5 (顯示CheckBoxList成員選中的內(nèi)容)
- ASP.NET jQuery 實(shí)例16 通過控件CustomValidator驗證RadioButtonList
- RadioButtonList綁定圖片及泛型Dictionary應(yīng)用
- asp.net CheckBoxList各項最小寬度CSS樣式(兼容性good)
- ASP.NET中用js取CheckBoxList中值的方法實(shí)例
- ASP.NET服務(wù)器端控件RadioButtonList，DropDownList，CheckBoxList的取值、賦值用法
- asp.net使用jQuery獲取RadioButtonList成員選中內(nèi)容和值示例
- 如何為CheckBoxList和RadioButtonList添加滾動條
相關(guān)文章
jQuery實(shí)現(xiàn)拖動效果的實(shí)例代碼
這篇文章給大家介紹了jquery實(shí)現(xiàn)拖動效果的簡單代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-06-06
jQuery實(shí)現(xiàn)的動態(tài)伸縮導(dǎo)航菜單實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的動態(tài)伸縮導(dǎo)航菜單,實(shí)例分析了jQuery鼠標(biāo)事件及animate、hide等方法的使用技巧,需要的朋友可以參考下2015-05-05
jQuery實(shí)現(xiàn)瀑布流布局詳解（PC和移動端）
這篇文章非常全面的介紹了在PC和移動端上jQuery實(shí)現(xiàn)瀑布流布局的詳細(xì)過程，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，對瀑布流布局感興趣的小伙伴們可以參考一下2015-10-10
jquery遍歷table的tr獲取td的值實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨query遍歷table的tr獲取td的值實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
本篇文章主要是對jquery cookie的用法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
用JQUERY實(shí)現(xiàn)全選和取消全選,減少了我們寫JS的麻煩,我們再也不用寫那么多代碼了,給大家分享兩段代碼,用JQUERY實(shí)現(xiàn)復(fù)選框的全選和取消全選.2008-08-08
jQuery Ajax 實(shí)現(xiàn)分頁 kkpager插件實(shí)例代碼
本文通過實(shí)例代碼給大家講解了jQuery Ajax 實(shí)現(xiàn)分頁 kkpager插件功能，需要的的朋友參考下吧2017-08-08
jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡單下拉導(dǎo)航效果,通過簡單的元素遍歷與樣式替換實(shí)現(xiàn)下拉導(dǎo)航的功能,非常具有實(shí)用價值,需要的朋友可以參考下2015-09-09
jquery分頁插件jquery.pagination.js使用方法解析
這篇文章主要針對js分頁插件jquery.pagination.js使用方法進(jìn)行解析，很實(shí)用的分頁插件，感興趣的小伙伴們可以參考一下2016-04-04
jquery實(shí)現(xiàn)類似EasyUI的頁面布局可改變左右的寬度
這篇文章主要介紹了通過jquery實(shí)現(xiàn)類似EasyUI的頁面布局可改變左右的寬度,需要的朋友可以參考下2014-07-07