ASP.NET jQuery 实例5 (显示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>

选中语言后界面:

(0)

相关推荐

  • ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)

    这章内容比较简单,直接上页面代码: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Recipe6.aspx.cs" Inherits="Recipe6" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt

  • RadioButtonList绑定图片及泛型Dictionary应用

    本博文是让你学会读取站点某一目录的图片,掌握LINQ与泛型Dictionary<TKey,TValue>的使用. 首先准备好几张图片存在站点某一目录之下,本例中的存储图片的目录名为MsSiteImages,图片你可以从微软网站下载http://windows.microsoft.com/en-US/windows/home 我们写一个泛型数据集,将存储目录的图片信息: 复制代码 代码如下: View Code private Dictionary<int, string> GetD

  • ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList

    界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="3&q

  • asp.net Javascript获取CheckBoxList的value

    以后我会陆续的写出这段时间中学习到的东西,与大家一起分享.这篇文章也算是工作中的一个笔记吧,希望给遇到同样问题的朋友,一点小小的帮助. 在 开发工作中,因为要做用到CheckBoxList在客户端用js操作,无论js怎样调试,就是无法获取value的值,很是郁闷,后来Google了下,去了趟CodeProject,算是幸运的.我们在网页上放置一下代码: 复制代码 代码如下: <asp:CheckBoxList runat="server" ID="chkDemo&quo

  • ASP.NET服务器端控件RadioButtonList,DropDownList,CheckBoxList的取值、赋值用法

    这三个控件都有一个Items集合,可以用 RepeatLayout 和 RepeatDirection 属性来控制列表的呈现形式.如果 RepeatLayout 的值为 Table,那么将在表中呈现列表.如果设置成 Flow,那么将在没有任何表结构的情况下呈现列表.默认情况下,RepeatDirection 的值为 Vertical.将此属性设置成 Horizontal 将会使列表水平呈现. RadioButtonList:控件提供已选中一个选项的单项选择列表(数据源单选).与其他列表控件相似,

  • ASP.NET中用js取CheckBoxList中值的方法实例

    做的一些项目都比较小,而且时间紧,有好多东西都没来得急总结,趁这会还有点时间把前面项目中的用到的知识点分享下,只为以后方便使用.前台页面代码 复制代码 代码如下: <!--关键字-->    <div id="keyWordsDiv" style="border: 2px solid #6FA1D9; display: none; position: absolute;        top: 0px; left: 0px; width: 260px; he

  • asp.net+jquery滚动滚动条加载数据的下拉控件

    这样的需求貌似自己感觉不是很合理,因为数据多了如此下拉无论从人还是机器操作都比较痛苦. 没办法由于需求下来了,只能按需求操作.网上找了很多相关控件都感觉有点庞大,占资源比较多.没办法自己花半天时间弄出个半成品自定义控件,拿出来分享下,如有高手看了请多指点. 需求:AJAX滚动滚动条加载数据的下拉列表 控件名称:Webcombo 所用技术:ASP.NET(C#),jQuery,ASP.NET一般处理文件(.ashx) 下拉列表具体实现:用DIV模拟下拉列表,input和图片模拟下拉框.最终结果如下

  • asp.net CheckBoxList各项最小宽度CSS样式(兼容性good)

    ASP.NET中,CheckBoxList里的选择都是自动宽度的,属性时没有设置各项宽度的设置. 参考了一下网上的最小宽度样式, 复制代码 代码如下: /* 最小寬度 */ .min_width{min-width:300px; /* sets max-width for IE */ _width:expression(document.body.clientWidth < 300 ? "300px" : "auto"); } 写成如下: 复制代码 代码如下:

  • asp.net使用jQuery获取RadioButtonList成员选中内容和值示例

    复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • 如何为CheckBoxList和RadioButtonList添加滚动条

    如何给CheckBoxList和RadioButtonList添加滚动条? 继承基类CheckBoxList和RadioButtonList,添加滚动属性,重写Render方法即可. 属性列表: #region 滚动控制 private bool _ShowScrollBar = false; /// <summary> /// 显示滚动条 /// </summary> [ System.ComponentModel.Description("是否显示显示滚动条"

随机推荐