首页 > 代码库 > ASP.NET CheckBoxList Operations with jQuery

ASP.NET CheckBoxList Operations with jQuery

2024-07-10 06:31:24   219人阅读

　　本文描述了如何通过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(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片段：

<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 = http://www.mamicode.com/[1, 2, 4];   var $ctrls = $("[id*=CheckBoxList1]");   for (var i = 0; i < selValue.length; i++) {       $ctrls.find(‘input:checkbox[value=http://www.mamicode.com/‘ + 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-1和Item-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项同时被选中。同样，你可以对代码进行适当修改以实现最小选中项限制。

 

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


联系
我们