jQuery获取checkboxlist的value值的方法

我们可以使用两种类型的 ASP.NET 控件将复选框添加到 Web 窗体页上:单独的
CheckBox 控件或 CheckBoxList
控件。两种控件都为用户提供了一种输入布尔型数据(真或假、是或否)的方法。

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

这里我们单独使用CheckBox,先来看看它的属性

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

属性 描述 .NET
AutoPostBack 规定在 Checked 属性已改变后,是否立即向服务器回传表单。默认是 false。 1.0
CausesValidation 规定点击 Button 控件时是否执行验证。 2.0
Checked 规定是否已选中该复选框。 1.0
InputAttributes 该 CheckBox 控件的 Input 元素所用的属性名和值的集合。 2.0
LabelAttributes 该 CheckBox 控件的 Label 元素所用的属性名和值的集合。 2.0
runat 规定该控件是服务器控件。必须被设置为 "server"。 1.0
Text 与复选框关联的文本标签。 1.0
TextAlign 与复选框关联的文本标签的对齐方式。(right 或 left) 1.0
ValidationGroup 在 CheckBox 控件回发到服务器时要进行验证的控件组。 2.0
OnCheckedChanged 当 Checked 属性被改变时,被执行函数的名称。
<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()));
  }
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBox.aspx.cs" Inherits="WebControls_CheckBox" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <style type="text/css">
 .style1
 {
  width: 107px;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <h3>CheckBox(复选框)</h3>
 <table style="width: 100%;">
  <tr>
  <td class="style1">
    
   属性</td>
  <td>
   值</td>
  <td>
   作用</td>
  </tr>
  <tr>
  <td class="style1">
    
   Checked</td>
  <td>
    
   ture|false</td>
  <td>
    选中状态|未选状态
  </td>
  </tr>
 </table>
 <hr />
 请选择你喜欢的运动: 
 <asp:CheckBox ID="chkSport" runat="server" Text="篮球" Checked="true" />
 <asp:CheckBox ID="chkSport2" runat="server" Text="足球" />
 <asp:CheckBox ID="chkSport3" runat="server" Text="地瓜" />
 <br />
 <asp:Button ID="btnSubmit" runat="server" Text="提交" onclick="btnSubmit_Click" />
 <hr />
 你选择的爱好是:<asp:Label ID="lblState" runat="server"></asp:Label>
 </div>
 </form>
</body>
</html>

页面中生成的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>
using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class WebControls_CheckBox : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {

 }
 protected void btnSubmit_Click(object sender, EventArgs e)
 {
 lblState.Text = string.Empty;
 if (chkSport.Checked)
 {
  lblState.Text = lblState.Text + chkSport.Text;
 }
 if (chkSport2.Checked)
 {
  if (lblState.Text.Length == 0)
  {
  lblState.Text = chkSport2.Text;
  }
  else
  {
  lblState.Text = lblState.Text + "," + chkSport2.Text;
  }
 }
 if (chkSport3.Checked)
 {
  if (lblState.Text.Length == 0)
  {
  lblState.Text = chkSport2.Text;
  }
  else
  {
  lblState.Text = lblState.Text + "," + chkSport3.Text;
  }
 }
 }
}

可以看出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);
  }
}

图片 1

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

您可能感兴趣的文章:

<table id="Table1" 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>

从上边可以看出,多了一个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值的方法,不知道大家有没有真正理解,希望这篇文章能够帮到大家。

您可能感兴趣的文章: