ASP.NET jQuery 實例5 (顯示CheckBoxList成員選中的內(nèi)容)
更新時間：2012年01月13日 22:32:19 作者：
這章我們主要看下如何通過jQuery來獲取CheckBoxList成員內(nèi)容
界面代碼：
<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在頁面呈現(xiàn)時轉(zhuǎn)換為<table id="ckbListPro">
// 成員ListItem轉(zhuǎn)換為<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>
選中語言后界面：
復制代碼 代碼如下:
<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在頁面呈現(xiàn)時轉(zhuǎn)換為<table id="ckbListPro">
// 成員ListItem轉(zhuǎn)換為<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>
選中語言后界面：
相關文章
這篇文章主要介紹了jQuery自動完成插件completer的相關資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery EasyUI 頁面加載等待及頁面等待層,代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法
這篇文章主要介紹了JQuery的Ajax中Post方法傳遞中文出現(xiàn)亂碼的解決方法,較為深入的分析了Ajax的post方法出現(xiàn)亂碼的原因,以及具體的解決方法,需要的朋友可以參考下2014-10-10
這篇文章主要介紹了jQuery 移動端artEditor富文本編輯器 的相關資料,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery在header中設置請求信息的方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery循環(huán)動畫與獲取組件尺寸的方法,實例分析了animate用法及組件的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了jQuery使用$.ajax進行即時驗證的方法,以完整實例形式較為詳細的分析了jQuery前臺控制ajax交互與后臺asp.net響應處理的詳細實現(xiàn)技巧,需要的朋友可以參考下2015-12-12
選擇器中的空格是不容忽視的，多一個空格或少一個空格也許得到的結(jié)果會截然不同的，下面以一個示例為大家詳細介紹下到底有什么不同，感興趣的朋友額可以參考下2013-08-08
對于時間控件我比較喜歡用jQuery-ui的那個，我也比較推薦那個，所以這篇我就不對屬性，函數(shù)，API進行翻譯了2012-07-07
本文通過實例代碼給大家簡單介紹了jQuery圖片縮放插件smartZoom使用以及遇到問題的解決方法，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-08-08