ASP.NET CheckBoxList Operations with jQuery - jaxu－IT工程師數位筆記本

文章出處

　　本文描述了如何通過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 = [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-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項同時被選中。同樣，你可以對代碼進行適當修改以實現最小選中項限制。

　　希望上面給出的代碼能對日常編程工作提供一些幫助！

文章列表