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


Posted in Javascript onJanuary 13, 2012

界面代码:

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

显示效果:

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

实现选中语言并显示内容脚本代码:
<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>

选中语言后界面:

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

Javascript 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
javascript简易缓动插件(源码打包)
Feb 16 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
js获取网页高度(详细整理)
Dec 28 Javascript
详解JavaScript对象和数组
Dec 03 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
JavaScript设计模型Iterator实例解析
Jan 22 Javascript
ASP.NET jQuery 实例4(复制TextBox的文本到本地剪贴板上)
Jan 13 #Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
Jan 13 #Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
Jan 13 #Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
Jan 13 #Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 #Javascript
js中根据字数截取字符串,不能截断url
Jan 12 #Javascript
js 实现css风格选择器(压缩后2KB)
Jan 12 #Javascript
You might like
攻克CakePHP系列二 表单数据显示
2008/10/22 PHP
php session应用实例 登录验证
2009/03/16 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
PHP字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
javascript 写类方式之六
2009/07/05 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
一道JS前端闭包面试题解析
2015/12/25 Javascript
Avalon中文长字符截取、关键字符隐藏、自定义过滤器
2016/05/18 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
JavaScript原生节点操作小结
2017/01/17 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
vue多次循环操作示例
2019/02/08 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
[02:08]我的刀塔不可能这么可爱 胡晓桃_1
2014/06/20 DOTA
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
vc6编写python扩展的方法分享
2014/01/17 Python
Python中线程的MQ消息队列实现以及消息队列的优点解析
2016/06/29 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
Sublime Text3最新激活注册码分享适用2020最新版 亲测可用
2020/11/12 Python
python 检测图片是否有马赛克
2020/12/01 Python
selenium自动化测试入门实战
2020/12/21 Python
学生励志演讲稿
2014/01/06 职场文书
个人求职信范文分享
2014/01/31 职场文书
网吧最新创业计划书范文
2014/03/27 职场文书
煤矿安全生产标语
2014/06/06 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年检验科工作总结
2014/11/22 职场文书
Golang 对es的操作实例
2022/04/20 Golang