关于VS05里checkboxlist用JS获取不到value值的解决方法(处女随笔)

页面上有个服务器控件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; 
        }
OK,这样就搞定了:)
我上面是参考了博客园上 
"人生苦短破茧""sammy知识库栖宇惊鸿的天下"写的关于checkboxlist用js取值的文章,综合了下,这样调用应该还是比较方便的,大家觉得有改进的地方回贴好了
参考文章如下:
http:
//www.cnblogs.com/songsh96/archive/2007/08/27/871911.html
http://www.cnblogs.com/Caceolod/articles/890809.html

关于这个方法我曾经在csdn论坛里也贴过,现在贴到园子里作为处女贴,见笑了呵呵,csdn上有位同志给了一个更好更简便的方法我也贴出来,如下
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>



希望能对初次来园子里"偷菜"的兄弟们有点小帮助:)
posted @ 2008-01-31 16:06  peace  阅读(4185)  评论(6编辑  收藏  举报