本文描述了如何通过jQuery来对ASP.NET CheckBoxList控件进行一些基本操作,如通过value/text/index check/uncheck CheckBoxList,最小/最大选择限制等。

  例如在ASP.NET页面中有如下CheckBoxList控件定义:

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
</asp:CheckBoxList>
<input type="button" value="OK" id="demo" />

  Server端代码:

Dictionary<int,string>  dictItems = new Dictionary<int,string>();
dictItems.Add(, "Item-1");
dictItems.Add(, "Item-2");
dictItems.Add(, "Item-3");
dictItems.Add(, "Item-4");
dictItems.Add(, "Item-5"); CheckBoxList1.DataSource = dictItems;
CheckBoxList1.DataTextField = "Value";
CheckBoxList1.DataValueField = "Key";
CheckBoxList1.DataBind();

  运行页面,在浏览器中你会看到上述代码会生成如下HTML片段:

<table id="MainContent_CheckBoxList1">
<tr>
<td><input id="MainContent_CheckBoxList1_0" type="checkbox" name="ctl00$MainContent$CheckBoxList1$0" value="1" /><label for="MainContent_CheckBoxList1_0">Item-1</label></td>
</tr><tr>
<td><input id="MainContent_CheckBoxList1_1" type="checkbox" name="ctl00$MainContent$CheckBoxList1$1" value="2" /><label for="MainContent_CheckBoxList1_1">Item-2</label></td>
</tr><tr>
<td><input id="MainContent_CheckBoxList1_2" type="checkbox" name="ctl00$MainContent$CheckBoxList1$2" value="3" /><label for="MainContent_CheckBoxList1_2">Item-3</label></td>
</tr><tr>
<td><input id="MainContent_CheckBoxList1_3" type="checkbox" name="ctl00$MainContent$CheckBoxList1$3" value="4" /><label for="MainContent_CheckBoxList1_3">Item-4</label></td>
</tr><tr>
<td><input id="MainContent_CheckBoxList1_4" type="checkbox" name="ctl00$MainContent$CheckBoxList1$4" value="5" /><label for="MainContent_CheckBoxList1_4">Item-5</label></td>
</tr>
</table>
<input type="button" value="OK" id="demo" />

  下面来看看如何通过jQuery对CheckBoxList控件进行操作。

1. 获取选中项的Value值

//Get value of selected items
$("#demo").click(function () {
var selectedValues = [];
$("[id*=CheckBoxList1] input:checked").each(function () {
selectedValues.push($(this).val());
});
if (selectedValues.length>0) {
alert("Selected Value(s): " + selectedValues.toString());
} else {
alert("No item has been selected.");
}
});

2. 获取选中项的索引

//Get index of selected items
$("#demo").click(function () {
var $ctrls = $("[id*=CheckBoxList1] input:checkbox");
$("[id*=CheckBoxList1] input:checked").each(function () {
alert($ctrls.index($(this)));
});
});

  注意索引是从0开始的,如果选中项是Item-1,Item-3,Item-4,则alert对话框中对应显示的内容是0,2,3.

3. 获取选中项的Text值

//Get text of selected items
$("#demo").click(function () {
$("[id*=CheckBoxList1] input:checked").each(function () {
alert($(this).next().html());
});
});

  查看对应的HTML代码,你会发现Text的值被存放在label控件中,该控件正好属于checkbox控件的下一个元素,因此我们可以通过$(this).next().html()方法来获取到它。

4. Check/Uncheck CheckBoxList的所有元素

$("[id*=CheckBoxList1] input:checkbox").prop('checked',true); //To check all
$("[id*=CheckBoxList1] input:checkbox").prop('checked',false);// To uncheck all

  jQuery 1.6以上版本使用prop()方法,1.6以下版本使用attr()方法。

5. 通过索引选中Checkbox

//Check Items by index
var selIndex = [0, 2, 3];
for (var i = 0; i < selIndex.length; i++) {
$("[id*=CheckBoxList1] input:checkbox").eq(selIndex[i]).prop('checked', true);
}

  同样,你可以在prop()方法中将第二个参数改为false来取消对Checkbox的选择。

6. 通过Value属性选中Checkbox

//Check Items by value
var selValue = [1, 2, 4];
var $ctrls = $("[id*=CheckBoxList1]");
for (var i = 0; i < selValue.length; i++) {
$ctrls.find('input:checkbox[value=' + selValue[i] + ']').prop('checked', true);
}

  上面的代码中,如果Value值在selValue数组中存在则将对应的Checkbox选中。

7. 通过Text属性选中Checkbox

//Check Items by Text
var selText = ['Item-1','Item-3'];
var $ctrls = $("[id*=CheckBoxList1]");
for (var i = 0; i < selText.length; i++) {
$ctrls.find('label:contains("' + selText[i] + '")').prev().prop('checked', true);
}

  上面的代码会查找CheckBoxList控件所生成的HTML代码中对应的label元素,如果该label元素的Text值在selText数组中存在则与之对应的Checkbox会被选中。本例中Item-1Item-3所对应的Checkbox会被选中。

8. 最大选中项限制

$("[id*=CheckBoxList1] input:checkbox").change(function () {
var maxSelection = 3;
if ($("[id*=CheckBoxList1] input:checkbox:checked").length > maxSelection) {
$(this).prop("checked", false);
alert("Please select a maximum of " + maxSelection + " items.");
}
})

  上面的代码允许CheckBoxList中最多只能有3项同时被选中。同样,你可以对代码进行适当修改以实现最小选中项限制。

  希望上面给出的代码能对日常编程工作提供一些帮助!

ASP.NET CheckBoxList Operations with jQuery的更多相关文章

  1. 【转载】Asp.Net中使用基于jQuery的javascript前台模版引擎JTemplate

    JTemplate是基于jQuery的开源的前端模版引擎,在Jtemplate模板中可以使用if判断.foreach循环.for循环等操作,使用Jtemplate模板优点在于ajax局部刷新界面时候不 ...

  2. asp.net中js和jquery调用ashx的不同方法分享,需要的朋友可以参考一下

    asp.net中js和jquery调用ashx的不同方法分享,需要的朋友可以参考一下     =============js================ 复制代码代码如下: var xhr = n ...

  3. asp.net mvc中使用jquery H5省市县三级地区选择控件

    地区选择是项目开发中常用的操作,本文讲的控件是在手机端使用的选择控件,不仅可以用于实现地区选择,只要是3个级别的选择都可以实现,比如专业选择.行业选择.职位选择等.效果如下图所示: 附:本实例asp. ...

  4. ASP.NET Core中的jQuery Unobtrusive Ajax帮助器

    最近在ASP.NET Core下写文章管理系统时,准备在分页显示文章内容时,使用Ajax.网上找了篇帖文,简单翻一下,仅供自己查阅. 原链接:https://dotnetthoughts.net/jq ...

  5. VS2012使用验证控件出现[ASP.NET]WebForms UnobtrusiveValidationMode 需要 'jquery' 的 ScriptResourceMapping。請加入 ScriptResourceMapping 命名的 jquery (區分大小寫)。的解决办法。

    方法一:在webconfig中找到 <appSettings><add key="aspnet:UseTaskFriendlySynchronizationContext& ...

  6. 在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

    使用使用jQuery的Load方法可以加载静态页面,本篇就在ASP.NET MVC下实现. Model先行: public class Article { public int Id { get; s ...

  7. ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js

    直接看代码: JS代码如下: <script type="text/javascript" language="javascript"> funct ...

  8. Csharp:asp.net CheckBoxList databind

    /// <summary> /// CheckBoxList數據源 /// 塗聚文 /// 20130705 /// /// </summary> private void s ...

  9. Asp.Net 服务器控件下使用Jquery.validate.js

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. anomaly detection algorithm

    anomaly detection algorithm 以上就是异常监测算法流程

  2. INNO SETUP 5.5.0以上版本中文语言包

    ; *** Inno Setup version 5.5.0+ Chinese messages ***;; To download user-contributed translations of ...

  3. laravel遇到的问题

    这是由于访问laravel项目报错的,解决几种可能出现的错误. 1)打开:D:\java\wamp\www\subway\app\config\app.php 修改:'debug' => tru ...

  4. jsp学习--如何定位错误和JSP和Servlet的比较

    一.如何查找JSP页面中的错误  JSP页面中的JSP语法格式有问题,导致其不能被翻译成Servlet源文件,JSP引擎将提示这类错误发生在JSP页面中的位置(行和列)以及相关信息.JSP页面中的JS ...

  5. C++主要数据类型在计算机中所占字节大小

    遇到了数据存储的大端和小端问题,这你妹的看的一头雾水,发现我基本知识严重匮乏啊,先了解C++各数据类型在自己机子上占多少字节吧,以及这些数据类型所占字节大小与神马有关.各种查资料然后写代码检验,小结于 ...

  6. python安装pycrypto报错error: command 'x86_64-linux-gnu-gcc' failed with exit status 1

    系统3.19.0-15-generic #15-Ubuntu 安装pycrypto提示error: command 'x86_64-linux-gnu-gcc' failed with exit st ...

  7. 問題排查:行動裝置網頁前端 UI 設計 (2)

    之前上網找了個星級評分的範例來玩, 當然這個範例已經用在另一個專案了, 目前看起來沒什麼狀況, 不過在移植到目前的專案之後, 就出現了怪現象: 1. 在大部份時間裡,點擊星星不會有任何反應 2. 即便 ...

  8. Python.Scrapy.14-scrapy-source-code-analysis-part-4

    Scrapy 源代码分析系列-4 scrapy.commands 子包 子包scrapy.commands定义了在命令scrapy中使用的子命令(subcommand): bench, check, ...

  9. KMP字符串匹配算法

    static void Main(string[] args) { var d = KMP("abcabcadabc55abcabcadabc55", "abcabcad ...

  10. uglifyjs压缩JS的

    一.故事总有其背景 年末将至,很多闲适的时间,于是刷刷微博,接触各种纷杂的信息——美其名曰“学习”.运气不错,遇到了一个新名词,uglifyjs. 据说是用来压缩JS文件的,据说还能优化JS,据说是基 ...