The jQuery UI library can be
used to apply styles to the <asp:CheckBoxList>
control, the server tag will remain as it
is, we can apply the jQuery UI decoration on top of it by adding a single line
of jQuery script, as follows.
The <asp:CheckBoxList>
control
<asp:CheckBoxList
ID="chkCommunication"
runat="server"
RepeatDirection="Horizontal">
<asp:ListItem Value="P">Phone</asp:ListItem>
<asp:ListItem Value="E">E-Mail</asp:ListItem>
<asp:ListItem Value="M">Mobile</asp:ListItem>
<asp:ListItem Value="S">SMS</asp:ListItem>
</asp:CheckBoxList>
The jQuery UI script
$('#chkCommunication').buttonset();
$('#chkCommunication').buttonset();
Here is the full
example
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<title>jQuery
Button</title>
<link type="text/css"
href="css/smoothness/jquery-ui-1.8.21.custom.css"
rel="Stylesheet" />
<script type="text/javascript"
src="JavaScript/jquery-1.7.2.js"></script>
<script type="text/javascript"
src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$('#chkCommunication').buttonset();
});
</script>
</head>
<body>
<form id="frmButton" runat="server">
<div>
<asp:CheckBoxList
ID="chkCommunication"
runat="server"
RepeatDirection="Horizontal">
<asp:ListItem Value="P">Phone</asp:ListItem>
<asp:ListItem Value="E">E-Mail</asp:ListItem>
<asp:ListItem Value="M">Mobile</asp:ListItem>
<asp:ListItem Value="S">SMS</asp:ListItem>
</asp:CheckBoxList>
</div>
</form>
</body>
</html>
</div>
</form>
</body>
</html>
The Checkbox list looks as
follows
The checked value can be retrieved in the code-behind file as
follows.
Response.Write("Communication: ");
Response.Write("Communication: ");
foreach (ListItem
chkItem in chkCommunication.Items)
{
if
(chkItem.Selected == true)
{
Response.Write(chkItem.Text + ", ");
}
}
Related Post
No comments:
Post a Comment