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 相关文章推荐
手把手教你自己写一个js表单验证框架的方法
Sep 14 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 Javascript
详解前端构建工具gulpjs的使用介绍及技巧
Jan 19 Javascript
js图片放大镜效果实现方法详解
Oct 28 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
vue scroller返回页面记住滚动位置的实例代码
Jan 29 Javascript
iView框架问题整理小结
Oct 16 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
node+vue实现文件上传功能
May 28 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
php中删除字符串中最先出现某个字符的实现代码
2013/02/03 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP内核探索:变量概述
2014/01/30 PHP
详解PHP 二维数组排序保持键名不变
2019/03/06 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
jQuery动态添加的元素绑定事件处理函数代码
2011/08/02 Javascript
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
在浏览器窗口上添加遮罩层的方法
2012/11/12 Javascript
jQuery获取注册信息并提示实现代码
2013/04/21 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
2016/05/09 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
浅析JavaScript中var that=this
2017/02/17 Javascript
JavaScript实现移动端轮播效果
2017/06/06 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
Python实现E-Mail收集插件实例教程
2019/02/06 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
办公室秘书自我鉴定
2014/01/18 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
优秀党员个人总结
2015/02/14 职场文书
教师工作态度自我评价
2015/03/05 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
趣味运动会加油词
2015/07/18 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server