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="选 择" />
好了,代码就这么多,点击按钮后弹出层,选中复选框后确实就可以取到值了,下面来看下效果吧!
做的一些项目都比较小,而且时间紧,有好多东西都没来得急总结,趁这会还有点时间把前面项目中的用到的知识点分享下,只为以后方便使用。
前台页面代码
复制代码 代码如下:
<!--关键字-->
<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="选 择" />
好了,代码就这么多,点击按钮后弹出层,选中复选框后确实就可以取到值了,下面来看下效果吧!