ASP.NET CheckBoxList Operations with jQuery

http://www.cnblogs.com/jaxu/p/3816683.html#undefined

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

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

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
</asp:CheckBoxList>

  Server端代码:

复制代码
Dictionary<int,string> dictItems = new Dictionary<int,string>();
dictItems.Add(1, "Item-1");
dictItems.Add(2, "Item-2");
dictItems.Add(3, "Item-3");
dictItems.Add(4, "Item-4");
dictItems.Add(5, "Item-5");

CheckBoxList1.DataSource = dictItems;
CheckBoxList1.DataTextField = "Value";
CheckBoxList1.DataValueField = "Key";
CheckBoxList1.DataBind();

复制代码

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

复制代码

复制代码

  下面来看看如何通过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.");
}
});

复制代码

  1. 获取选中项的索引

复制代码
//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.

  1. 获取选中项的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()方法来获取到它。

  1. 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()方法。

  1. 通过索引选中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的选择。

  1. 通过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选中。

  1. 通过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-1和Item-3所对应的Checkbox会被选中。

  1. 最大选中项限制

复制代码
$("[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项同时被选中。同样,你可以对代码进行适当修改以实现最小选中项限制。

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

posted on 2016-02-04 11:25  雪夜  阅读(176)  评论(0编辑  收藏  举报