您的位置：首页 > Web前端 > JavaScript

Javascript如何获取CheckBoxList控件列表项的值？

2010-04-23 21:36 543 查看
Javascript如何获取CheckBoxList控件列表项的值呢？CheckboxList是服务器控件，绑定数据容易，但是生成的静态页面居然没有ListItem的Value值，所以默认情况下在页面中是取不到ListItem的值的。

原始生成页面代码：

<table id="ctl00_mainContent_FriendsList" border="0">
<tr>
<td><input id="ctl00_mainContent_FriendsList_0" type="checkbox" name="ctl00$mainContent$FriendsList$0" /><label for="ctl00_mainContent_FriendsList_0">jarome</label></td><td><input id="ctl00_mainContent_FriendsList_1" type="checkbox" name="ctl00$mainContent$FriendsList$1" /><label for="ctl00_mainContent_FriendsList_1">admin1</label></td><td></td>
</tr>
</table>
这里面只有Label里面的Text值，显然取不到Value值。

想点办法，自己加个值进来，在数据绑定之后加上下面代码：
foreach (ListItem li in FriendsList.Items)
{
li.Attributes.Add("alt", li.Value);
}
就是给ListItem加个alt属性，赋予Value值，相当于：

<asp:CheckBoxList ID="FriendsList" runat="server">
<asp:ListItem Value="jarome" alt="jarome">jarome</asp:ListItem>
<asp:ListItem Value="admin" alt="admin">admin1</asp:ListItem>
</asp:CheckBoxList>

页面生成代码：

<table id="ctl00_mainContent_FriendsList" border="0">
<tr>
<td><span alt="jarome"><input id="ctl00_mainContent_FriendsList_0" type="checkbox" name="ctl00$mainContent$FriendsList$0" /><label for="ctl00_mainContent_FriendsList_0">jarome</label></span></td><td><span alt="admin"><input id="ctl00_mainContent_FriendsList_1" type="checkbox" name="ctl00$mainContent$FriendsList$1" /><label for="ctl00_mainContent_FriendsList_1">admin1</label></span></td><td></td>
</tr>
</table>

看到多了个<span/>，alt中就是我们想要取得的值。

//获取CheckBoxList值，使用jQuery类库
function GetCheckBoxListValue(obj) { //obj为CheckBoxList的ClientID
var v = new Array();
$("#" + obj+ " input").each(function() {
if (this.checked) {
v.push($(this).parent().attr("alt"));
}
});
return v; //返回一列以','分隔的结果
}

先放置一個測試用CheckBoxList

<asp:CheckBoxList ID="CheckBoxList1" runat="server">
<asp:ListItem Text="小明" Value="A"></asp:ListItem>
<asp:ListItem Text="小華" Value="B"></asp:ListItem>
<asp:ListItem Text="小張" Value="C"></asp:ListItem>
<asp:ListItem Text="小菜" Value="D"></asp:ListItem>
</asp:CheckBoxList>

執行後,觀看程式碼

<table id="CheckBoxList1" border="0">
<tr>
<td><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">小明</label></td>
</tr><tr>
<td><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">小華</label></td>
</tr><tr>
<td><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">小張</label></td>
</tr><tr>
<td><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" /><label for="CheckBoxList1_3">小菜</label></td>
</tr>
</table>

由上面的結果我們可以看到,input 裡並沒有Value的值可以讓JavaScript抓取,所以現在我們要幫他加一個attribute


protected void Page_Load(object sender, EventArgs e)




...{


foreach (ListItem li in CheckBoxList1.Items)


li.Attributes["MainValue"] = li.Value;




}

在觀看一次程式碼

<table id="CheckBoxList1" border="0">
<tr>
<td><span MainValue="A"><input id="CheckBoxList1_0" type="checkbox" name="CheckBoxList1$0" /><label for="CheckBoxList1_0">小明</label></span></td>
</tr><tr>
<td><span MainValue="B"><input id="CheckBoxList1_1" type="checkbox" name="CheckBoxList1$1" /><label for="CheckBoxList1_1">小華</label></span></td>
</tr><tr>
<td><span MainValue="C"><input id="CheckBoxList1_2" type="checkbox" name="CheckBoxList1$2" /><label for="CheckBoxList1_2">小張</label></span></td>
</tr><tr>
<td><span MainValue="D"><input id="CheckBoxList1_3" type="checkbox" name="CheckBoxList1$3" /><label for="CheckBoxList1_3">小菜</label></span></td>
</tr>
</table>

我們可以發現,input被Span包住了,而且裡面多了一個我們剛剛設定的MainValue Attribute,現在我們就可以引用Jquery來取值了

主要思路就是为ListItem加一个"checkValue"属性，前台通过javascript找到。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CheckBoxListValue.aspx.cs" Inherits="test_CheckBoxListValue" %>

<!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>Javascript得到CheckBoxList的Value</title>
<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
//把选中的值写入hiddenfield
function f(){
var total = $("#chkBox input[@type=checkbox]:checked").size();
var checkValues = '';
$("#chkBox input[@type=checkbox]:checked").each(function(){
checkValues += $(this).parent().attr("checkValue") + ",";
});
alert("选中了" + total + "个" + "\n" + "值：" + checkValues.substring(0,checkValues.length-1));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
主要思路就是为ListItem加一个"checkValue"属性，前台通过javascript找到。
</div>
<div>
<input type="button" onclick="f();" value="取值" />
<asp:CheckBoxList ID="chkBox" runat="server">
</asp:CheckBoxList>
</div>
</form>
</body>
</html>

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class test_CheckBoxListValue : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
Bind();
}
private void Bind()
{
ListItem li1 = new ListItem("1", "1");
li1.Attributes.Add("checkValue", "1");
chkBox.Items.Add(li1);

ListItem li2 = new ListItem("2", "2");
li2.Attributes.Add("checkValue", "2");
chkBox.Items.Add(li2);
}
}


$("#CheckBoxList1 input:checkbox").each(function(){




$(this).parent('span').attr('MainValue');




});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航