This article will show you how you can change css class
change of button on radiobutton selection in asp.net using jQuery.
Some of my previous articles are as follows: Shaking
Login Box Open Button Click Using jQuery In Asp.Net, Slider
Colorpicker Horizontal Direction Using jQuery in Asp.Net, jQuery
Error Message Display Using Popup Dialog Box In Asp.Net, jQuery
Datepicker With Date Reset Button For Current Date In Asp.Net, Get
All Checked Checkbox Value Using jQuery in Asp.Net CheckBoxList, Get
RadioButton Value Using jQuery In Asp.Net, jQuery
Ajax Search and Display In MVC WebGrid in Asp.Net MVC Using C#.Net.
So for this article first we will create a new asp.net application and add the below code into the page.
So for this article first we will create a new asp.net application and add the below code into the page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm15.aspx.cs" Inherits="WebApplication2.WebForm15"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Css
Class Change of Button On Radiobutton Selection In Asp.Net Using jQuery</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script language="javascript">
function
ChangeClassOfButton(data) {
if
(data == 1) {
$("#<%=Button1.ClientID %>").removeClass("cssChangeSilverButton").addClass("cssChangeGrayButton");
} else
{
$("#<%=Button1.ClientID %>").removeClass("cssChangeGrayButton").addClass("cssChangeSilverButton");
}
}
</script>
<style type="text/css">
.cssChangeGrayButton
{
background-color:
Gray;
font-weight:
bold;
width:
150px;
height:
50px;
}
.cssChangeSilverButton
{
background-color:
Silver;
width:
150px;
height:
50px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:RadioButton ID="RadioButton1" runat="server"
onclick="javascript:ChangeClassOfButton(1);" GroupName="1"
/>Gray
Style
<asp:RadioButton ID="RadioButton2" runat="server"
onclick="javascript:ChangeClassOfButton(2);" GroupName="1"
/>Silver
Style
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" CssClass="cssChangeSilverButton" />
</form>
</body>
</html>
|
In above code I have used below mention javascript code to change the button css class on radiobutton selection. In this first I have removed the class and then assign the class.
function
ChangeClassOfButton(data) {
if
(data == 1) {
$("#<%=Button1.ClientID %>").removeClass("cssChangeSilverButton").addClass("cssChangeGrayButton");
} else
{
$("#<%=Button1.ClientID %>").removeClass("cssChangeGrayButton").addClass("cssChangeSilverButton");
}
}
|
On the radio button click I have called the javascript
function. Now we have donw run the application to check the output.
DOWNLOAD
About the Author
0 comments:
Please let me know your view