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>
  • 相关阅读:
    C++笔记(2018/2/6)
    2017级面向对象程序设计寒假作业1
    谁是你的潜在朋友
    A1095 Cars on Campus (30)(30 分)
    A1083 List Grades (25)(25 分)
    A1075 PAT Judge (25)(25 分)
    A1012 The Best Rank (25)(25 分)
    1009 说反话 (20)(20 分)
    A1055 The World's Richest(25 分)
    A1025 PAT Ranking (25)(25 分)
  • 原文地址:https://www.cnblogs.com/zhangzt/p/1627954.html
Copyright © 2011-2022 走看看