ASP. NET jQuery instance 5 (display the content selected by the CheckBoxList Member)

Interface code:
Copy codeThe Code is as follows:
<Form id = "form1" runat = "server">
<Div align = "left">
<Fieldset style = "width: 400px; height: 150px">
<P>
Select a language </p>
<Asp: CheckBoxList ID = "ckbListPro" runat = "server">
<Asp: ListItem Value = "1" Text = "C #"> </asp: ListItem>
<Asp: ListItem Value = "2" Text = "JAVA"> </asp: ListItem>
<Asp: ListItem Value = "3" Text = "C ++"> </asp: ListItem>
<Asp: ListItem Value = "4" Text = "JavaScript"> </asp: ListItem>
</Asp: CheckBoxList>
</Fieldset>
<Br/>
<Div id = "message" style = "color: Red;"> </div>
</Div>
</Form>

Display Effect:

Implement the selected language and display the content script code:
Copy codeThe Code is as follows:
<Script src = "Scripts/jquery-1.4.1-vsdoc.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
// The CheckBoxList is converted to <table id = "ckbListPro">
// Convert the ListItem member to <input type = "checkbox"> <label>
$ ("# <% = CkbListPro. ClientID %>"). click (function (){
Var str = "";
// Obtain the selected <input type = "checkbox">
$ ("# <% = CkbListPro. ClientID %> input [type = checkbox]: checked"). each (function (){
Str = str + $ (this ). val () + ":" + $ (this ). next (). text () + ""; // next () indicates <label>
});
$ ("# Message"). text (str );
});
});
</Script>

Interface after selecting a language: