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 相关文章推荐
表单内同名元素的控制
Nov 22 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
javascript实现随机显示星星特效
Jan 28 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 Javascript
纯JS实现可拖拽表单的简单实例
Sep 02 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 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
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
PHP使用PDO访问oracle数据库的步骤详解
2017/09/29 PHP
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
2009/11/04 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
JavaScript 实现打印,打印预览,打印设置
2014/12/30 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
jQuery仅用3行代码实现的显示与隐藏功能完整实例
2015/10/08 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
如何从零开始手写Koa2框架
2019/03/22 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Javascript数组及类数组相关原理详解
2020/10/29 Javascript
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
PyQt5的PyQtGraph实践系列3之实时数据更新绘制图形
2019/05/13 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
某IT外企面试题-二分法求方程!看看大家的C++功底
2015/07/04 面试题
成品仓管员岗位职责
2013/12/11 职场文书
党风廉政承诺书
2014/03/27 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
小学教师评语大全
2014/04/23 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
Nginx快速入门教程
2021/03/31 Servers
详解vue身份认证管理和租户管理
2021/05/25 Vue.js