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 相关文章推荐
List Information About the Binary Files Used by an Application
Jun 11 Javascript
jquery控制listbox中项的移动并排序
Nov 12 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
Apr 14 Javascript
JS碰撞运动实现方法详解
Dec 15 Javascript
JavaScript初学者必看“new”
Jun 12 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
mongoose设置unique不生效问题的解决及如何移除unique的限制
Nov 07 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
解决npm管理员身份install时出现权限的问题
Mar 16 Javascript
详解element-ui设置下拉选择切换必填和非必填
Jun 17 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
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
Apache下禁止php文件被直接访问的解决方案
2013/04/25 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
PHP的关于变量和日期处理的一些面试题目整理
2015/08/10 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
javascript简单事件处理和with用法介绍
2013/09/16 Javascript
jquery按回车提交数据的代码示例
2013/11/05 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
深入理解NumPy简明教程---数组2
2016/12/17 Python
对python中的for循环和range内置函数详解
2018/04/17 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
Python3 修改默认环境的方法
2019/02/16 Python
python对常见数据类型的遍历解析
2019/08/27 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
德国传统玻璃制造商:Cristalica
2018/04/23 全球购物
英国钻石公司:British Diamond Company
2020/02/16 全球购物
西班牙Polo衫品牌:Polo Club
2020/08/09 全球购物
下面关于"联合"的题目的输出是什么
2013/08/06 面试题
全陪导游欢迎词
2014/01/17 职场文书
高中生操行评语
2014/04/25 职场文书
小学班主任心得体会
2016/01/07 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
go语言中fallthrough的用法说明
2021/05/06 Golang
spring 项目实现限流方法示例
2022/07/15 Java/Android