• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NET中用js取CheckBoxList中的值

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

功能:用脚本取CheckBoxList中的值,并用"|"将其分开,之后将取到的值放入文本框,返回数据库做添加或者修改

前台页面代码

<!--关键字-->
<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.getElementById( "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';
document.getElementById( "keyWordsDiv").style.display= "none"; 
}

添加一个按钮调用js

 <asp:TextBox ID="txtKeyWords" runat="server" ReadOnly="True" class="inp"></asp:TextBox>
 <input  />

 好了,代码就这么多,点击按钮后弹出层,选中复选框后确实就可以取到值了,下面来看下效果吧!

(图1)

(图2)


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
使用asp.netmvc+entityframework+sqlServer搭建一个简单的codefirst项目发布时间:2022-07-10
下一篇:
C#ASP.NET里的@妙用,字符串换行发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap