JQuery .Net CheckBoxList控件

很久没弄jQuery了,今天做项目时,遇到个问题:js取不到选中的CheckBoxList的ListItem的值。

 CheckBoxList前台解析为:

<table id="listTest" border="0">
<tr>
<td>
<input id="listTest_0" type="checkbox" name="listTest$0" />
<label for="listTest_0">item1</label>
</td>
</tr>
<tr>
<td><input id="listTest_1" type="checkbox" name="listTest$1" />
<label for="listTest_1">item2</label>
</td>
</tr>
</table>

搜了下,网上有个可行的办法:给ListItem加alt属性(其他属性也行),通过获取属性值来获取选项值;

 

解决方案

在绑定checkboxlist时,为ListItem每个对象添加一个alt属性,值保存对应的value值,代码如下:

 

 if (dt != null && dt.Rows.Count > 0)
{
foreach (DataRow dr in dt.Rows)
{
//分别为text值、value值
listTest.Items.Add(new ListItem(dr["Title"].ToString(), dr["ID"].ToString()));
}
//为ListItem对象添加alt属性,值保存value值
foreach (ListItem li in listTest.Items)
{
li.Attributes.Add("alt", li.Value);
}
}
<table id="Table1" border="0">
<tr>
<td>
<span alt="400"><input id="listTest_0" type="checkbox" name="listTest$0" />
<label for="listTest_0">基于jQuery的一个震动效果</label></span>
</td>
</tr>
<tr>
<td><span alt="398"><input id="listTest_1" type="checkbox" name="listTest$1" />
<label for="listTest_1">使用css的overflow属性改变缩略图大小</label></span>
</td>
</tr>
</table>

下面就是js取选中的listitem的值:

$(document).ready(function() {
$("#btnShow").click(function() {
var valuelist = ""; //保存checkbox选中值
//遍历name以listTest开头的checkbox
$("input[name^='listTest']").each(function() {
if (this.checked) {
//$(this):当前checkbox对象;
//$(this).parent("span"):checkbox父级span对象
valuelist += $(this).parent("span").attr("alt") + ",";
}
});
if (valuelist.length > 0) {
//得到选中的checkbox值序列,结果为400,398
valuelist = valuelist.substring(0, valuelist.length - 1);
}
});
});

关键点:valuelist += $(this).parent("span").attr("alt") + ",";

时间: 2024-08-19 07:50:11

JQuery .Net CheckBoxList控件的相关文章

WinForm中类似WebForm中的CheckBoxList控件

web|控件 前些天,在.Net技术的论坛里面看到了有个帖子,我好像记得是怎么实现WinForm中类似WebForm中的CheckBoxList控件,我简单的实现了那样的一个控件 首先,你得建立一个控件项目,假如说是: 接着,你就添加一个类:CheckBoxCollection,它是个CheckBox的集合类 具体的代码如下 CheckBoxCollection.cs using System;using System.Collections;using System.Windows.Forms

jquery实现pager控件示例

 这篇文章主要介绍了jquery实现pager控件示例,需要的朋友可以参考下 js:     代码如下: $.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {     if (cfg && pageIndex > 0 && pageSize>0) {         var token = "#" + this.attr("id");         thi

jquery fullcandar 日程表控件 添加上一天下一天点击事件问题

问题描述 jquery fullcandar 日程表控件 添加上一天下一天点击事件问题 jquery fullcandar 日程表控件 添加上一天下一天点击事件,这样可以获取下一天上一天的日期 解决方案 http://ask.csdn.net/questions/160016

下载-jquery fullcandar 日程表控件不支持ie8问题,官方demo实例

问题描述 jquery fullcandar 日程表控件不支持ie8问题,官方demo实例 jquery fullcalendar日表控件不支持ie8,具体什么原因,我在官网下载的demo实例,谁接触过,指点下 解决方案 要看你使用是否正确.http://stackoverflow.com/questions/11363966/fullcalendar-in-ie8-events-not-renderinghttp://stackoverflow.com/questions/6863160/jq

急急急急急!我在UltraWebTab控件中动态的添加了checkboxlist控件......

问题描述 我在UltraWebTab控件中动态的添加了checkboxlist控件,现在我想获取这个checkboxlist控件的每一行的text值.如何获取啊?新人提问请各位大虾教教小弟.以下是部分代码:Infragistics.WebUI.UltraWebTab.Tabtab;tab=newInfragistics.WebUI.UltraWebTab.Tab(ds.Tables[0].Rows[i]["G_Name"].ToString());//tab.ContentPane.T

jquery mobile时间控件赋值问题

问题描述 jquery mobile时间控件赋值问题 这样的时间控件怎么赋值呀? 解决方案 具体看你用的这个插件的api,jquery官网没有这个插件..

基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合_jquery

本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

jQuery UI Dialog控件中的表单无法正常提交的解决方法_jquery

最近使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交,具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据. 研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内.也就是说,原先在form内的表单在Dialog初始化

实例详解jQuery结合GridView控件的使用方法_jquery

jQuery是一种非常强大的客户端JS编程技术,这里不想过多阐述它的相关背景知识,只想简单演示一下如何与asp.net的控件结合开发. 比如,我们要做一个下面如图所示的功能,效果是状态.编号.数字1.数字2.平均值所有的项都是通过后台绑定,如何点击checkbox按钮,来实现自动计算当前行两个数字的平均值呢?前提是用jQuery来实现? 我们直接在页面的Page_Load事件中输入如下代码: protected void Page_Load(object sender, EventArgs e)