<
form
id
="form1"
runat
="server"
>
<
div
align
="left"
>
<
fieldset
style
="width: 400px; height: 150px"
>
<
p
>
請選擇語言
</
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
>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function
() {
//
CheckBoxList在頁面呈現時轉換為<table id="ckbListPro">
//
成員ListItem轉換為<input type="checkbox"><label>
$("#<%=ckbListPro.ClientID %>").click(
function
() {
var
str = "";
//
這里獲取到被選中的<input type="checkbox">
$("#<%=ckbListPro.ClientID %> input[type=checkbox]:checked").each(
function
() {
str = str + $(
this
).val() + ":" + $(
this
).next().text() + " ";
//
這里的next()表示<label>
});
$("#message").text(str);
});
});
</script>