Asp.net 中CheckBoxList 的应用
Asp.net 中CheckBoxList 的应用
<asp:Panel ID="Panel5" runat="server" Style="display: none" CssClass="modalPopup" BackColor="WhiteSmoke" BorderColor="Gray" BorderWidth="1pt" Height=320px Width="310px" >
<asp:Panel ID="Panel6" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black" BackColor="Silver" Width="310px" Height="25px" >
<div>
<p> Choose Process Code:</p>
</div>
</asp:Panel>
<!---ProcessCode--->
<DIV style="OVERFLOW: auto; WIDTH: 310px; HEIGHT: 240px" align="left">
<p>
<asp:CheckBoxList ID="CheckBoxList_ProcessCode" runat="server" > </asp:CheckBoxList>
</p>
</DIV>
<!---ProcessCode--->
<div>
<p style="text-align: center">
<asp:Button ID="OkButton" runat="server" Width=60 Text="OK" OnClientClick ="return CheckValue();" OnClick="btnCheck_Click" />
<asp:Button ID="CancelButton" Width=60 runat="server" Text="Cancel" OnClientClick="return deleteAll();" />
</p>
</div>
</asp:Panel>
-- OkButton 控制着取出 CheckBoxList 中Check = True 的值，而 CancelButton, 控制着Clear 所选中的CheckBoxList 选项.
由于CheckBoxList 的特殊性，我们无法在asp.net 服务器进行取值等操作处理. 通过测试和网上的一些资，可以接合前后台的方法来完成这一功能操作。
前台： OnClientClick ="return CheckValue();"
OnClientClick="return deleteAll();"
<script type="text/javascript">
function ok()
{
var x
}
function CheckValue()
{
//在JS端调用CheckBoxList
var chkObject = document.getElementById('<%=CheckBoxList_ProcessCode.ClientID%>')
var chkInput =chkObject.getElementsByTagName("INPUT")
var arrListValue = chkObject.ListValue.split(',')
var count = arrListValue.length
var strCheckChecked = ""
var arrCheckChecked
var chkValue = ""
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);
document.getElementById('<%=TextBox_ProcessCode_2.ClientID %>').value=chkValue
deleteAll()
}
//如果有则移除末尾的逗号
function RTrim(str)
{
if(str.charAt(str.length-1)==",")
return str.substring(0,str.length-1);
else
return str;
}
function deleteAll()
{
for(var i=0;i<document.getElementById('<%=CheckBoxList_ProcessCode.ClientID%>').getElementsByTagName("INPUT").length;i++)
{
document.getElementById('<%=CheckBoxList_ProcessCode.ClientID%>'+"_"+i).checked = false;
}
}
</script>
后台：
Protected Sub OkButton_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles OkButton.Click
Dim lstg_process As String = ""
For lint_index As Integer = 0 To Me.CheckBoxList_ProcessCode.Items.Count - 1
If Me.CheckBoxList_ProcessCode.Items(lint_index).Selected = True Then
lstg_process = lstg_process + Me.CheckBoxList_ProcessCode.Items(lint_index).Value + ";"
End If
Next
Me.TextBox_ProcessCode_2.Text = lstg_process
End Sub
对 CheckBxoList 的数据绑定做于下处理：
Sub BindProcessCode()
Dim sql As String
sql = "select ProcessCode,ProcessName from PRC_ProcessInfo "
Dim ds As DataSet = Live.Ado.ADOProxy.GetRowsByQuery(sql)
Me.CheckBoxList_ProcessCode.DataSource = ds
Me.CheckBoxList_ProcessCode.DataTextField = "ProcessName"
Me.CheckBoxList_ProcessCode.DataValueField = "ProcessCode"
Me.CheckBoxList_ProcessCode.DataBind()
Dim checkListValue As String = ""
Dim checkListText As String = ""
For i As Integer = 0 To Me.CheckBoxList_ProcessCode.Items.Count - 1
checkListValue += CheckBoxList_ProcessCode.Items(i).Value + ","
checkListText += CheckBoxList_ProcessCode.Items(i).Text + ","
Next
checkListText = checkListText.TrimEnd(",")
checkListValue = checkListValue.TrimEnd(",")
'//由于checkboxlist在前台html页面表现中没有value属性，导致js无法获取选种的value值
' //这里用程序来添加value和text属性
CheckBoxList_ProcessCode.Attributes("ListValue") = checkListValue
CheckBoxList_ProcessCode.Attributes("ListText") = checkListText
End Sub
---Result---
