checkboxlist控件取到它对应的value值

原创

张静静 2012-03-31 15:17:50 ©著作权

文章标签 职场休闲 checkboxlist控件 value值 文章分类 .Net 后端开发

©著作权归作者所有：来自51CTO博客作者张静静的原创作品，请联系作者获取转载授权，否则将追究法律责任

最近用到checkboxlist控件，想取到它对应的value值，但是用一下方法后取不到值，从网上查资

料后才知道checkboxlist在前台html页面表现中没有value属性。
C# code有个地方要用到ajax,页面上的值得用js到才行,页面上有个服务器控件checkboxlist,想

要获取选中的value值,
          var chkObject = document.getElementById('<%=chkProjStatus.ClientID%>');
             var chkInput =chkObject.getElementsByTagName("INPUT");
             for(var i=0;i<chkInput.length;i++)
             {
                 if(chkInput[i].checked)
                {
                    alert(chkInput[i].value);
                }
             }
发现按上面的方法是取不到的, 由于checkboxlist在前台html页面表现中没有value属性，导致js

无法获取选种的value值
一下是从网上知道到的两种解决方案；个人认为第二种简单就用第二种方法解决了问题；
须用程序来添加value和text属性,还是给个实际的dome吧 ,新建一个xx.aspx页面,cs文件代码如

下

     protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            BindChkList();
        }
    }
    /// <summary>
    /// 绑定复选框
    /// </summary>
    private void BindChkList()
    {
        chkProjStatus.Items.Add(new ListItem("项目前期", "505004"));
        chkProjStatus.Items.Add(new ListItem("项目进行中", "505001"));
        chkProjStatus.Items.Add(new ListItem("项目中期", "505003"));
        chkProjStatus.Items.Add(new ListItem("项目后期", "505005"));
        chkProjStatus.Items.Add(new ListItem("项目结束", "505002"));
        chkProjStatus.Items.Add(new ListItem("项目意外中止", "505006"));//这里您可以

绑定数据库里的数据

        string checkListValue = "";
        string checkListText = "";
        for (int i = 0; i < chkProjStatus.Items.Count; i++)
        {
            checkListValue += chkProjStatus.Items[i].Value + ",";
            checkListText += chkProjStatus.Items[i].Text + ",";
        }
        checkListText = checkListText.TrimEnd(',');
        checkListValue = checkListValue.TrimEnd(',');

//由于checkboxlist在前台html页面表现中没有value属性，导致js无法获取选种的

value值
        //这里用程序来添加value和text属性
        chkProjStatus.Attributes["ListValue"] = checkListValue;
        chkProjStatus.Attributes["ListText"] = checkListText;
    }

   aspx页面的js脚本这样来:
    function CheckValue()
         {
            //在JS端调用CheckBoxList
             var chkObject = document.getElementById('<%=chkProjStatus.ClientID%>');
             var chkInput =chkObject.getElementsByTagName("INPUT");
             var arrListValue = chkObject.ListValue.split(',');
             var count = arrListValue.length;
             var strCheckChecked = "";
             var arrCheckChecked;
             var chkValue = "";

//每次点击CheckBoxList的一个Item，都循环把所有Item的选中状态按0、1标志，存入一个变量

，最后再根据这个标志来决定checkboxlist中要取的值

                for (var i=0; i< chkInput.length; i++)
                {
                    if(chkInput[i].checked)
                    {
                        strCheckChecked = strCheckChecked + "1" + ",";
                    }
                    else
                    {
                        strCheckChecked = strCheckChecked + "0" + ",";
                    }
               }
                arrCheckChecked = RTrim(strCheckChecked).split(',');
                 for(var j = 0; j < count; j++)
                 {
                     if(arrCheckChecked[j] == "1")
                     {
                         chkValue += arrListValue[j] +",";
                     }
                 }
                 chkValue = RTrim(chkValue);
                 alert(chkValue);

         }

        //如果有则移除末尾的逗号
        function RTrim(str)
        {
            if(str.charAt(str.length-1)==",")
               return str.substring(0,str.length-1);
            else
               return str;
        }

----------另一种方式
C# code
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;

using System.Collections.Generic;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        List<string[]> metadata = new List<string[]>();

        metadata.Add(new string[] { "项目前期", "505004"});
        metadata.Add(new string[] { "项目进行中", "505001" });
        metadata.Add(new string[] { "项目中期", "505003" });
        metadata.Add(new string[] { "项目后期", "505005" });
        metadata.Add(new string[] { "项目结束", "505002" });
        metadata.Add(new string[] { "项目意外中止", "505006" });

ListItem lt;

        for (int i = 0; i < metadata.Count; i++)
        {
            lt = new ListItem(metadata[i][0], metadata[i][1]);
            lt.Attributes["text"] = metadata[i][0];
            lt.Attributes["value1"] = metadata[i][1];
            this.CheckBoxList1.Items.Add(lt);
        }
    }
}

HTML code
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"

Inherits="_Default" %>

<!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>
    <script language="javascript" type="text/javascript">
    function checkAll()
    {
        var ckelems = document.getElementById("CheckBoxList1").getElementsByTagName

("input");
var spelems = document.getElementById("CheckBoxList1").getElementsByTagName

("span");
        for(var i=0;i<ckelems.length;i++)
        {
            if(ckelems[i].type=="checkbox")
            {
                if(ckelems[i].checked)
                    alert('文本是 '+spelems[i].text+' 值是 '+spelems[i].value1);
            }
        }
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CheckBoxList ID="CheckBoxList1" runat="server" Height="261px"

Width="301px">
</asp:CheckBoxList>
<input id="Button1" type="button" value="button" onclick="checkAll

()"/></div>
</form>
</body>
</html>