這章我們主要看下如何透過jQuery來獲取CheckBoxList成員內容

介面程式碼：

複製程式碼

程式碼如下:

<form runat="server">

<div align="left">

<fieldset>

<p>

請選擇語言</p>

<asp:CheckBoxList 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></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>

// 成員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>

選中語言後介面：