欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ASP.NET中用js取CheckBoxList中值的方法实例

程序员文章站 2024-03-01 19:15:40
做的一些项目都比较小,而且时间紧,有好多东西都没来得急总结,趁这会还有点时间把前面项目中的用到的知识点分享下,只为以后方便使用。前台页面代码复制代码 代码如下:

做的一些项目都比较小,而且时间紧,有好多东西都没来得急总结,趁这会还有点时间把前面项目中的用到的知识点分享下,只为以后方便使用。
前台页面代码

复制代码 代码如下:

<!--关键字-->
    <div id="keywordsdiv" style="border: 2px solid #6fa1d9; display: none; position: absolute;
        top: 0px; left: 0px; width: 260px; height: 120px; z-index: 3; background-color: #eaf1fd;">
        <div style="width: 260px; height: 20px; background-color: #6fa1d9">
            <ul style="cursor: pointer; line-height: 20px;">
                <li style="float: right" onclick="getcheckvale()">[确定]</li><li style="float: right"
                    onclick="closeself()">[关闭]</li></ul>
        </div>
        <div>
            <asp:checkboxlist id="cblkeywords" runat="server" repeatcolumns="2">
            </asp:checkboxlist>
        </div>
    </div>

js脚本
复制代码 代码如下:

//打开关键词窗口
function  locking(e)
{     
    var divleft = e.offsetleft;
    var divtop = e.offsettop;
    while(e=e.offsetparent) 
    { 
         divleft   +=   e.offsetleft;   
         divtop   +=   e.offsettop; 
    }     
    var divobj = document.getelementbyid("keywordsdiv");  
    divobj.style.left = divleft+"px";
    divobj.style.top = divtop+20+"px";
    divobj.style.display = "block"; 
}
//关闭关键词窗口
function  closeself()
{
    document.all.keywordsdiv.style.display = 'none';
    var objcheck = document.getelementbyid("cblkeywords").getelementsbytagname("input");
    for (var i = 0; i < objcheck.length; i++) {
        document.getelementbyid("cblkeywords_" + i).checked = false;
    }
    return false;    
}
//关键词取值
function getcheckvale()
{
//var objcheck=document.getelementbyid("cblkeywords");
var objcheck=document.getelementbyid("cblkeywords").getelementsbytagname("input");
var objlabel = document.getelementbyid("cblkeywords").getelementsbytagname("label")
var txtkeywordsvalue = "";
var m=0
for(var i=0;i<objcheck.length;i++)
{
      if(document.getelementbyid("cblkeywords_"+i).checked)
      {
        var idcheck =document.getelementbyid("cblkeywords_"+i).id;//当前选择checkbox的id
        for(var j = 0;j <objlabel.length;j++)
        {
            var forvalue=objlabel[j].getattributenode("for").value             
            if(forvalue == idcheck)
            { 
               m+=1;
               for(var k=0;k<m;k++)
               {
               if(k==m-1)
               {
                    txtkeywordsvalue+=objlabel[j].innerhtml;
               }
               else
               {
                    txtkeywordsvalue +="|"+objlabel[j].innerhtml;
                    break;
                }
                }
            }
        }
      }    
}
document.getelementbyid("txtkeywords").value=txtkeywordsvalue;
document.all.keywordsdiv.style.display='none';
}

添加一个按钮调用js
复制代码 代码如下:

<asp:textbox id="txtkeywords" runat="server" readonly="true" class="inp"></asp:textbox>
<input id="imgkey" type="button" runat="server" onclick="locking(this)" class="tailbut"  value="选 择" />

 好了,代码就这么多,点击按钮后弹出层,选中复选框后确实就可以取到值了,下面来看下效果吧!
ASP.NET中用js取CheckBoxList中值的方法实例

ASP.NET中用js取CheckBoxList中值的方法实例