ASP. NET CheckBoxList Operations with jQuery

This article describes how to use jQuery to perform some basic operations on the ASP. NET CheckBoxList control, such as using value/text/index check/uncheck CheckBoxList and minimum/maximum selection restrictions.

For example, the following CheckBoxList control definition is available on the ASP. NET page:

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

Server code:

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(); 

Run the page. In the browser, you will see that the above Code will generate the following HTML snippet:

<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" /> 

The following describes how to use jQuery to operate the CheckBoxList control.

1. Obtain the Value of the selected item

//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. Retrieve the index of the selected item

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

Note that the index starts from 0. If the selected items are Item-1, Item-3, and Item-4, the content displayed in the alert dialog box is, 3.

3. Obtain the Text value of the selected item.

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

View the corresponding HTML code. You will find that the Text value is stored in the label control, which is the next element of the checkbox control.Certificate (this).next().html ()Method to obtain it.

4. Check/Uncheck all elements of CheckBoxList

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

Use jQuery 1.6 or laterProp ()Method, which is used in versions earlier than 1.6Attr ()Method.

5. Select the Checkbox through the index

//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);   }

Similarly, you canProp ()Change the second parameterFalseTo cancel the Checkbox selection.

6. Select Checkbox through the Value attribute

//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);   }

In the above Code, ifValueValueSelValueIf an array exists, the corresponding Checkbox is selected.

7. Select Checkbox through the Text attribute

//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);    }

The code above looks for the label element of the HTML code generated by the CheckBoxList control. If the Text value of the label element isSelTextThe corresponding Checkbox in the array will be selected. In this exampleItem-1AndItem-3The corresponding Checkbox is selected.

8. Maximum selected items

$("[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.");          }      })

The code above allows a maximum of three items in the CheckBoxList to be selected at the same time. Similarly, you can modify the code to minimize the selected items.

 

I hope the Code provided above can help with daily programming!