JavaScrip控制checkboxlist、RadioButtonList的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();
        }
    }
    /// 

    /// 绑定复选框
    /// 

    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" "">

<html xmlns="" >
<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>

 

 

 

RadioButtonList：

 

 1     <div>
 2         意向落户地区:<asp:RadioButtonList ID="YiXiangLuoHuDiQu" runat="server" CssClass="textEnabled" RepeatDirection="Horizontal">
 3             <asp:ListItem Value="金坛">金坛asp:ListItem>
 4             <asp:ListItem Value="溧阳">溧阳asp:ListItem>
 5             <asp:ListItem Value="武进">武进asp:ListItem>
 6             <asp:ListItem Value="高新区">高新区asp:ListItem>
 7             <asp:ListItem Value="天宁">天宁asp:ListItem>
 8             <asp:ListItem Value="钟楼">钟楼asp:ListItem>
 9             <asp:ListItem Value="戚墅堰">戚墅堰asp:ListItem>
10             <asp:ListItem Value="待定">待定asp:ListItem>
11         asp:RadioButtonList>
12     div>
13 
14     <script language="javascript" type="text/javascript">
15         function check() {
16             var rbltable = document.getElementById("YiXiangLuoHuDiQu");
17             var rbs = rbltable.getElementsByTagName("INPUT");
18             var result = false;
19             for (var i = 0; i < rbs.length; i++) {
20                 if (rbs[i].checked) {
21                     result = true;
22                     break;
23                 }
24             }
25             if (result == false) {
26                 alert('请选择意向落户地区');
27             }
28             return result;
29         }
30     script>
31 
32     <asp:Button ID="btnSubmit" runat="server" OnClientClick="javascript:return check()" OnClick="btnSubmit_Click" Text="Button" />

做的过程中发现：RadioButtonList在客户端被翻译成了Table，通过getElementsByTagName("INPUT")方法获取它的所有子radio，对每个radio做个循环，看是否被选中，选中则返回true,未选中提示"请选择意向落户地区"返回false，下面看下被翻译出来的table内容：

Code
 1 <TBODY>
 2 <TR>
 3 <TD><INPUT id=YiXiangLuoHuDiQu_0 value=金坛 type=radio name=YiXiangLuoHuDiQu><LABEL for=YiXiangLuoHuDiQu_0>金坛LABEL>TD>
 4 <TD><INPUT id=YiXiangLuoHuDiQu_1 value=溧阳 type=radio name=YiXiangLuoHuDiQu><LABEL for=YiXiangLuoHuDiQu_1>溧阳LABEL>TD>
 5 <TD><INPUT id=YiXiangLuoHuDiQu_2 value=武进 type=radio name=YiXiangLuoHuDiQu><LABEL for=YiXiangLuoHuDiQu_2>武进LABEL>TD>
 6 <TD><INPUT id=YiXiangLuoHuDiQu_3 value=高新区 type=radio name=YiXiangLuoHuDiQu><LABEL for=YiXiangLuoHuDiQu_3>高新区LABEL>TD>
 7 <TD><INPUT id=YiXiangLuoHuDiQu_4 value=天宁 type=radio name=YiXiangLuoHuDiQu><LABEL for=YiXiangLuoHuDiQu_4>天宁LABEL>TD>
 8 <TD><INPUT id=YiXiangLuoHuDiQu_5 value=钟楼 type=radio name=YiXiangLuoHuDiQu><LABEL for=YiXiangLuoHuDiQu_5>钟楼LABEL>TD>
 9 <TD><INPUT id=YiXiangLuoHuDiQu_6 value=戚墅堰 type=radio name=YiXiangLuoHuDiQu><LABEL for=YiXiangLuoHuDiQu_6>戚墅堰LABEL>TD>
10 <TD><INPUT id=YiXiangLuoHuDiQu_7 value=待定 type=radio name=YiXiangLuoHuDiQu><LABEL for=YiXiangLuoHuDiQu_7>待定LABEL>TD>
11 TR>
12 TBODY>
13