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 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
js 图片缩放(按比例)控制代码
May 27 Javascript
js数组操作学习总结
Nov 04 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
js面向对象之静态方法和静态属性实例分析
Jan 10 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
AngularJS 服务详细讲解及示例代码
Aug 17 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
vue中计算属性(computed)、methods和watched之间的区别
Jul 27 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
微信小程序实现自定义modal弹窗封装的方法
Jun 15 Javascript
javascript实现拼图游戏
Jan 29 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
php中的mongodb select常用操作代码示例
2014/09/06 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
javascript实现的listview效果
2007/04/28 Javascript
flexigrid 参数说明
2010/11/23 Javascript
jquery入门—访问DOM对象方法
2013/01/07 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
2014/03/05 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
AngularJS基础 ng-model-options 指令简单示例
2016/08/02 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
2016/09/08 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
Bootstrap实现模态框效果
2019/09/30 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
如何在node环境实现“get数据解析”代码实例
2020/07/03 Javascript
python读取注册表中值的方法
2013/04/08 Python
python导出chrome书签到markdown文件的实例代码
2017/12/27 Python
Python通过OpenCV的findContours获取轮廓并切割实例
2018/01/05 Python
Tesserocr库的正确安装方式
2018/10/19 Python
python如何编写类似nmap的扫描工具
2020/11/06 Python
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
美国照明、家居装饰和家具购物网站:Bellacor
2017/09/20 全球购物
三星法国官方网站:Samsung法国
2019/10/31 全球购物
Delphi工程师笔试题
2013/09/21 面试题
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
中学教代会开幕词
2016/03/04 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
JavaScript实现简单拖拽效果
2021/09/15 Javascript
MySQL提升大量数据查询效率的优化神器
2022/07/07 MySQL