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>

选中语言后界面:

相关文章

  • jquery中ajax函数执行顺序问题之如何设置同步

    jquery中ajax函数执行顺序问题之如何设置同步

    这篇文章主要介绍了jquery中ajax函数执行顺序问题之如何设置同步,需要的朋友可以参考下
    2014-02-02
  • jQuery判断元素上是否绑定了指定事件的方法

    jQuery判断元素上是否绑定了指定事件的方法

    这篇文章主要介绍了jQuery判断元素上是否绑定了指定事件的方法,涉及jQuery绑定事件的判断技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03
  • 基于jQuery实现可编辑的表格

    基于jQuery实现可编辑的表格

    这篇文章主要为大家详细介绍了基于jQuery实现可编辑的表格,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • jQuery 源码分析笔记(2) 变量列表

    jQuery 源码分析笔记(2) 变量列表

    在初始化jQuery对象的代码开始之前声明了一大堆变量。主要包括:全局变量的备份;处理字符串用的正则表达式;检测浏览器的正则表达式;对核心函数的引用备份。这里略过大部分,只说两种:全局变量和浏览器检测。
    2011-05-05
  • jquery拖动层效果插件用法实例分析(附demo源码)

    jquery拖动层效果插件用法实例分析(附demo源码)

    这篇文章主要介绍了jquery拖动层效果插件用法,结合实例形式分析了jquery-ui-1.7.2.custom.min.js插件的具体使用技巧,并附带完整demo源码供读者下载参考,需要的朋友可以参考下
    2016-04-04
  • jQuery实现自动调用和触发某个事件的方法

    jQuery实现自动调用和触发某个事件的方法

    这篇文章主要介绍了jQuery实现自动调用和触发某个事件的方法,结合实例形式列举分析了jQuery事件触发的常见操作技巧,需要的朋友可以参考下
    2016-11-11
  • jQuery遍历Form示例代码

    jQuery遍历Form示例代码

    取得id为form1的form的所有输入变量,然后使用for循环进行数组遍历,具体实现如下,感兴趣的朋友可以参考下
    2013-09-09
  • jQuery中:reset选择器用法实例

    jQuery中:reset选择器用法实例

    这篇文章主要介绍了jQuery中:reset选择器用法,实例分析了:reset选择器的功能、定义及匹配重置按钮的使用技巧,需要的朋友可以参考下
    2015-01-01
  • 基于jquery的回到页面顶部按钮

    基于jquery的回到页面顶部按钮

    昨天看到一个园友的blog中有个页面下滚后出现用于"回到页面顶部"按钮的效果, 感觉挺不错的, 所以自己也写了一个, 用jQuery写是再简单不过了. 下面就直接给出代码了
    2011-06-06
  • JQuery 的跨域方法推荐_可跨任何网站

    JQuery 的跨域方法推荐_可跨任何网站

    下面小编就为大家带来一篇JQuery 的跨域方法推荐_可跨任何网站。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05

最新评论