 
<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> 

顯示效果：

實現(xiàn)選中語言并顯示內(nèi)容腳本代碼：

復(fù)制代碼代碼如下:

 
<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> 

選中語言后界面：

您可能感興趣的文章:

CheckBoxList

相關(guān)文章

jQuery打印指定區(qū)域Html頁面并自動分頁
項目中需要用到打印HTML頁面，需要指定區(qū)域打印，使用jquery.PrintArea.js 插件實現(xiàn)分頁,需要的朋友可以參考下
2014-07-07
jQuery點擊出現(xiàn)愛心特效
這篇文章主要為大家詳細(xì)介紹了jQuery點擊出現(xiàn)愛心特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-08-08
基于jquery的復(fù)制網(wǎng)頁內(nèi)容到WORD的實現(xiàn)代碼
基于jquery的復(fù)制網(wǎng)頁內(nèi)容到WORD的實現(xiàn)代碼，需要的朋友可以參考下。
2011-02-02
jquery高效反選具體實現(xiàn)
反選想必大家都有一個比較獨特的方法吧，下面與大家分享下利用jquery實現(xiàn)高效反選，具體代碼如下感興趣的朋友可以參考下哈
2013-05-05
jquery插件實現(xiàn)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了jquery插件實現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
jQuery Validation PlugIn的使用方法詳解
這篇文章主要介紹了jQuery Validation PlugIn的使用方法，需要的朋友可以參考下
2015-12-12
jQuery中each和js中forEach的區(qū)別分析
這篇文章主要介紹了jQuery中each和js中forEach的區(qū)別,結(jié)合實例形式較為詳細(xì)的分析了jQuery中each和js中forEach針對數(shù)組與對象遍歷的相關(guān)操作技巧與注意事項,需要的朋友可以參考下
2019-02-02
jquery 動態(tài)調(diào)整textarea高度
用jquery實現(xiàn)的調(diào)整textarea高度的實現(xiàn)代碼。這個動畫效果比較流暢。適合新手學(xué)習(xí)。
2009-11-11
JQuery基于FormData異步提交數(shù)據(jù)文件
這篇文章主要介紹了JQuery基于FormData異步提交數(shù)據(jù)文件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2020-09-09
jQuery實現(xiàn)tab欄切換效果
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)tab欄切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-12-12