ASP.NET中用js取CheckBoxList中的值
做的一些项目都比较小,而且时间紧,有好多东西都没来得急总结,趁这会还有点时间把前面项目中的用到的知识点分享下,只为以后方便使用。
功能:用脚本取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 id="imgkey" type="button" runat="server" onclick="locking(this)" class="tailBut" value="选 择" />
好了,代码就这么多,点击按钮后弹出层,选中复选框后确实就可以取到值了,下面来看下效果吧!
(图1)
(图2)