The jQuery UI library can be
used to apply styles to the <asp:RadioButtonList>
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:RadioButtonList>
control
<asp:RadioButtonList ID="radGender"
runat="server"
RepeatDirection="Horizontal">
<asp:ListItem Value="M">Male</asp:ListItem>
<asp:ListItem Value="F">Female</asp:ListItem>
</asp:RadioButtonList>
The jQuery UI script
$('#radGender').buttonset();
$('#radGender').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() {
$('#radGender').buttonset();
});
</script>
</head>
<body>
<form id="frmButton" runat="server">
<div>
<asp:RadioButtonList
ID="radGender"
runat="server"
RepeatDirection="Horizontal">
<asp:ListItem Value="M">Male</asp:ListItem>
<asp:ListItem Value="F">Female</asp:ListItem>
</asp:RadioButtonList>
</div>
</form>
</body>
</html>
The Radio button list looks
as follows
The checked value can be
retrieved in the code-behind file as follows.
Response.Write("Gender: " + radGender.SelectedItem.Text);
Response.Write("Gender: " + radGender.SelectedItem.Text);
Related Post
2 comments:
Kindly attach the supporting css and js files.
The CSS and JS Files used in this post are the basic jQuery & jQuery UI files, which can be downloaded from the sites.
http://docs.jquery.com/Downloading_jQuery
And
http://jqueryui.com/download
Post a Comment