ASP. CheckBoxList Operations with JQuery

This article describes how to use jquery to perform some basic operations on an ASP. CheckBoxList control, such as Value/text/index check/uncheck CheckBoxList, minimum/maximum selection limits, and so on.

For example, in an ASP. NET page, there are the following CheckBoxList control definitions:

<ID= "CheckBoxList1"  runat= "Server"></  asp:checkboxlist><type= "button"  Value= "OK"  id= "Demo"/>

Server-side code:

dictionary<int,string> Dictitems =Newdictionary<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 generates the following HTML fragment:

<TableID= "Maincontent_checkboxlist1">    <TR>        <TD><inputID= "Maincontent_checkboxlist1_0"type= "checkbox"name= "Ctl00$maincontent$checkboxlist1$0"value= "1" /><label for= "Maincontent_checkboxlist1_0">Item-1</label></TD>    </TR><TR>        <TD><inputID= "Maincontent_checkboxlist1_1"type= "checkbox"name= "Ctl00$maincontent$checkboxlist1$1"value= "2" /><label for= "Maincontent_checkboxlist1_1">Item-2</label></TD>    </TR><TR>        <TD><inputID= "Maincontent_checkboxlist1_2"type= "checkbox"name= "Ctl00$maincontent$checkboxlist1$2"value= "3" /><label for= "Maincontent_checkboxlist1_2">Item-3</label></TD>    </TR><TR>        <TD><inputID= "Maincontent_checkboxlist1_3"type= "checkbox"name= "Ctl00$maincontent$checkboxlist1$3"value= "4" /><label for= "Maincontent_checkboxlist1_3">Item-4</label></TD>    </TR><TR>        <TD><inputID= "Maincontent_checkboxlist1_4"type= "checkbox"name= "Ctl00$maincontent$checkboxlist1$4"value= "5" /><label for= "Maincontent_checkboxlist1_4">Item-5</label></TD>    </TR></Table><inputtype= "button"value= "OK"ID= "Demo" /> 

Here's a look at how to manipulate CheckBoxList controls with jquery.

1. Get 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 Selected Value (s): "+ selectedvalues.tostring ());  else   {alert ( No item has been s elected. "    ); }});

2. Get 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 is starting at 0, and if the selected item is item-1,item-3,item-4, the corresponding display in the Alert dialog box is 0,2,3.

3. Get the text value of the selected item

// Get Text of selected items $ ("#demo"). Click (function  () {            $ ("[Id*=checkboxlist1]" Input: Checked "). each (function  () {         alert (().Next (). html ());     } );});

Looking at the corresponding HTML code, you will find that the value of text is stored in the label control, which exactly belongs to the next element of the CheckBox control, so we can get to it by means of the (this ). Next (). HTML () method.

4. All elements of Check/uncheck CheckBoxList

$ ("[Id*=checkboxlist1] Input:checkbox"). Prop (' checked ',true//tocheckall $ ("[id*= CheckBoxList1] Input:checkbox "). Prop (' checked ',false); // To uncheck all

JQuery 1.6 or later uses the prop () method, and 1.6 uses the attr () method.

5. Select the checkbox by index

// Check Items by index   var selindex = [0, 2, 3];     for (var i = 0; i < selindex.length; i++) {       $ (true);   }

Similarly, you can cancel the selection of a checkbox by changing the second parameter to false in the prop () method.

6. Select the checkbox by using the Value property

// Check Items by value   var selvalue = [1, 2, 4];    var $ctrls = $ ("[Id*=checkboxlist1]");     for (var i = 0; i < selvalue.length; i++) {       $ctrls. Find (true);   }

In the above code, the corresponding checkbox is selected if the value values exist in the selvalue array.

7. Select the checkbox with the Text property

// Check Items by Text    var selText = [' Item-1 ', ' Item-3 '];     var $ctrls = $ ("[Id*=checkboxlist1]");      for (var i = 0; i < seltext.length; i++) {        $ctrls. Find (true);    }

The code above looks for the corresponding label element in the HTML code generated by the CheckBoxList control, and if the label element's text value exists in the selText array, the checkbox corresponding to it is selected. The checkbox for Item-1 and Item-3 In this example is selected.

8. Maximum Check limit

$ ("[Id*=checkboxlist1] Input:checkbox"). Change (function  () {          var maxselection = 3  ;           if ($ ("[Id*=checkboxlist1] input:checkbox:checked"). Length > maxselection) {              $ (this False);              Alert ("Please select a maximum of" + Maxselection + "items.") );          }      })

The above code allows a maximum of 3 items in the CheckBoxList to be selected at the same time. Similarly, you can make appropriate changes to the code to achieve the minimum check limit.

I hope the code given above can provide some help for the daily programming work!