ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)

更新时间：2012年01月13日 22:32:19 作者：

这章我们主要看下如何通过jQuery来获取CheckBoxList成员内容

界面代码：

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

选中语言后界面：

您可能感兴趣的文章:

CheckBoxList

jQuery打印指定区域Html页面并自动分页
项目中需要用到打印HTML页面，需要指定区域打印，使用jquery.PrintArea.js 插件实现分页,需要的朋友可以参考下
2014-07-07
jQuery点击出现爱心特效
这篇文章主要为大家详细介绍了jQuery点击出现爱心特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
基于jquery的复制网页内容到WORD的实现代码
基于jquery的复制网页内容到WORD的实现代码，需要的朋友可以参考下。
2011-02-02
jquery高效反选具体实现
反选想必大家都有一个比较独特的方法吧，下面与大家分享下利用jquery实现高效反选，具体代码如下感兴趣的朋友可以参考下哈
2013-05-05
jquery插件实现轮播图效果
这篇文章主要为大家详细介绍了jquery插件实现轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-04-04
jQuery Validation PlugIn的使用方法详解
这篇文章主要介绍了jQuery Validation PlugIn的使用方法，需要的朋友可以参考下
2015-12-12
jQuery中each和js中forEach的区别分析
这篇文章主要介绍了jQuery中each和js中forEach的区别,结合实例形式较为详细的分析了jQuery中each和js中forEach针对数组与对象遍历的相关操作技巧与注意事项,需要的朋友可以参考下
2019-02-02
jquery 动态调整textarea高度
用jquery实现的调整textarea高度的实现代码。这个动画效果比较流畅。适合新手学习。
2009-11-11
JQuery基于FormData异步提交数据文件
这篇文章主要介绍了JQuery基于FormData异步提交数据文件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-09-09
jQuery实现tab栏切换效果
这篇文章主要为大家详细介绍了jQuery实现tab栏切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12