jQuery获取checkboxlist的value值的方法


Posted in Javascript onSeptember 27, 2015

CheckboxList是服务器控件,绑定数据容易,服务器端获取选中值也容易。但是生成的静态页面居然没有ListItem的Value值,所以默认情况下用js在页面中是取不到ListItem的值的。至于为什么不显示value值,我也不清楚,本篇给出一个用jQuery获取checkboxlist值的方法。

先看看原始的页面html代码:

<asp:CheckBoxList runat="server" ID="listTest">
</asp:CheckBoxList>
<input type="button" id="btnShow" value="显示选中值" />

下面我们绑定checkboxlist,代码如下:

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()));
  }
}

页面中生成的html代码如下:

<table id="listTest" border="0"> 
<tr> 
  <td>
    <input id="listTest_0" type="checkbox" name="listTest$0" />
    <label for="listTest_0">基于jQuery的一个震动效果</label>
  </td> 
  </tr>
<tr> 
  <td><input id="listTest_1" type="checkbox" name="listTest$1" />
    <label for="listTest_1">使用css的overflow属性改变缩略图大小</label>
  </td>
</tr>
</table>

可以看出checkboxlist转换为一个表格的形式,并且其中没有value值。label中的值,即为text值。当点击它时,也可以选中checkbox,这里在选checkbox时提高了用户体验。
下面进入我们的处理过程,首先,在绑定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);
  }
}

现在,生成的html代码如下:

<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>

从上边可以看出,多了一个span标签,里边alt的值即为我们需要的value值。使用下边的jQuery代码即可获得:

$(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);
    }
  });
});

以上就是jQuery获取checkboxlist的value值的方法,不知道大家有没有真正理解,希望这篇文章能够帮到大家。

Javascript 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
js 获取计算后的样式写法及注意事项
Feb 25 Javascript
Jquery对数组的操作技巧整理
Mar 25 Javascript
Javascript中setTimeOut和setInterval的定时器用法
Jun 12 Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 Javascript
jQuery实现有动画淡出效果的二级折叠菜单代码
Oct 17 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
Apr 20 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
Sep 27 #Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 #Javascript
asp知识整理笔记3(问答模式)
Sep 27 #Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 #Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 #Javascript
AngularJS基础教程之简单介绍
Sep 27 #Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 #Javascript
You might like
PHP怎样调用MSSQL的存储过程
2006/10/09 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
微信公众号开发之获取位置信息php代码
2018/06/13 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
laravel5.5安装jwt-auth 生成token令牌的示例
2019/10/24 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
BootStrap创建响应式导航条实例代码
2016/05/31 Javascript
基于JS代码实现实时显示系统时间
2016/06/16 Javascript
AngularJS 面试题集锦
2016/09/06 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
jquery表单插件form使用方法详解
2017/01/20 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
分享Pycharm中一些不为人知的技巧
2018/04/03 Python
python Tensor和Array对比分析
2020/01/08 Python
flask开启多线程的具体方法
2020/08/02 Python
Selenium+BeautifulSoup+json获取Script标签内的json数据
2020/12/07 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python爬取代理ip的示例
2020/12/18 Python
python palywright库基本使用
2021/01/21 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
构造器Constructor是否可被override?
2013/08/06 面试题
护士辞职信模板
2014/01/20 职场文书
青年教师培训方案
2014/02/06 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Java基础——Map集合
2022/04/01 Java/Android
Golang Web 框架Iris安装部署
2022/08/14 Python