zoukankan      html  css  js  c++  java
  • [转]关于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>
  • 相关阅读:
    二十七、正则表达式补充
    二十六、python中json学习
    二十五、python中pickle序列学习(仅python语言中有)
    MongoDB系列
    产品经理思考
    摩拜数据产品
    龙珠直播之swot
    ahp层次分析法软件
    用户画像之门店用户类型的体系
    汽车后市场SWOT分析
  • 原文地址:https://www.cnblogs.com/zhangzt/p/1627954.html
Copyright © 2011-2022 走看看