ASP.NET jQuery 實(shí)例6 (實(shí)現(xiàn)CheckBoxList成員全選或全取消)
更新時(shí)間：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滾動(dòng)滾動(dòng)條加載數(shù)據(jù)的下拉控件
- ASP.NET jQuery 實(shí)例5 (顯示CheckBoxList成員選中的內(nèi)容)
- ASP.NET jQuery 實(shí)例16 通過控件CustomValidator驗(yàn)證RadioButtonList
- RadioButtonList綁定圖片及泛型Dictionary應(yīng)用
- asp.net CheckBoxList各項(xiàng)最小寬度CSS樣式(兼容性good)
- ASP.NET中用js取CheckBoxList中值的方法實(shí)例
- ASP.NET服務(wù)器端控件RadioButtonList，DropDownList，CheckBoxList的取值、賦值用法
- asp.net使用jQuery獲取RadioButtonList成員選中內(nèi)容和值示例
- 如何為CheckBoxList和RadioButtonList添加滾動(dòng)條
相關(guān)文章
jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果示例【附demo源碼下載】
這篇文章主要介紹了jQuery插件Echarts實(shí)現(xiàn)的雙軸圖效果,結(jié)合完整實(shí)例形式分析了Echarts插件制作雙軸圖效果的操作步驟與相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03
超棒的響應(yīng)式布局jQuery插件Freetile.js
隨著頁面扁平化的普及，越來越多的網(wǎng)站都開始使用響應(yīng)式布局，作為一個(gè)優(yōu)秀的前端工作者，必須要精通的，這里給大家推薦一款響應(yīng)式布局的jQuery插件。2014-11-11
本文主要介紹了jquery實(shí)現(xiàn)頁面加載效果的實(shí)例，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
JQuery 簡便實(shí)現(xiàn)頁面元素?cái)?shù)據(jù)驗(yàn)證功能
JQuery 簡便實(shí)現(xiàn)頁面元素?cái)?shù)據(jù)驗(yàn)證功能...2007-03-03
這篇文章主要介紹了jQuery中find()方法用法,實(shí)例分析了find()方法的功能、定義及獲取匹配元素后代元素的使用技巧,需要的朋友可以參考下2015-01-01
JQuery搜索框自動(dòng)補(bǔ)全(模糊匹配)功能實(shí)現(xiàn)示例
這篇文章主要介紹了JQuery搜索框自動(dòng)補(bǔ)全(模糊匹配)功能實(shí)現(xiàn)示例沒使用JQuery UI的autocomplete插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-01-01
無限樹Jquery插件zTree的常用功能特性總結(jié)
這篇文章主要對(duì)無限樹Jquery插件zTree的常用功能特性總結(jié)，ztree的語法結(jié)構(gòu)是基于key-value的形式配置,需要的朋友可以參考下2014-09-09
這篇文章主要介紹了jquery懸浮提示框?qū)崿F(xiàn)方法,涉及jQuery鼠標(biāo)事件響應(yīng)及頁面元素樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-01-01
jQuery不間斷滾動(dòng)效果(模擬百度新聞支持文字/圖片/垂直滾動(dòng))
jQuery模擬百度新聞不間斷滾動(dòng)效果并且支持文字、圖片水平垂直滾動(dòng)等等，感興趣的朋友可以了解下，或許本文所提供的案例對(duì)你學(xué)習(xí)jquery特效有所幫助,好了話不多說，切入正題2013-02-02
jQuery實(shí)現(xiàn)的彈幕效果完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的彈幕效果,結(jié)合完整實(shí)例形式分析了jQuery通過結(jié)合時(shí)間函數(shù)控制輸入文字與樣式的漸變實(shí)現(xiàn)彈幕效果,需要的朋友可以參考下2017-09-09