JQuery Change background color based on radio button Click Event - JQuery Script
Posted by Raj
JQuery Change background color based on radio button Click Event-JQuery Script
In this article,I will Explain how to change background colour based on Radio button value in JQuery and how to use Radio button Click event using Javascript.I want to change the background Colour to the latest radio button clicked value.
I have written radio buttons background color change script using JQuery.
Example:Change div /Span background Colour color with active chcecked radio button.
<!DOCTYPE html>
<html>
<title>how to change the background color of a radio button.<</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<div>
<DIV><b>Change background color on radio select</b></DIV>
<div>
<input type="radio" name="1" value="Red" class="hi">
<span id="Red">Red</span>
</div>
<div>
<input type="radio" name="1" value="Green" class="mid">
<span id="Green">Green</span>
</div>
<div>
<input type="radio" name="1" value="Blue" class="lo">
<span id="Blue">Blue</span>
</div>
</div>
</form>
<script>
$("input").click(function() {
$("span").css('background','white');
var id=$(":checked").val();
$('#'+id).css('background',id);
});
</script>
</body>
</html>
OUTPUT
In this article,I will Explain how to change background colour based on Radio button value in JQuery and how to use Radio button Click event using Javascript.I want to change the background Colour to the latest radio button clicked value.
I have written radio buttons background color change script using JQuery.
Example:Change div /Span background Colour color with active chcecked radio button.
<!DOCTYPE html>
<html>
<title>how to change the background color of a radio button.<</title>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<form>
<div>
<DIV><b>Change background color on radio select</b></DIV>
<div>
<input type="radio" name="1" value="Red" class="hi">
<span id="Red">Red</span>
</div>
<div>
<input type="radio" name="1" value="Green" class="mid">
<span id="Green">Green</span>
</div>
<div>
<input type="radio" name="1" value="Blue" class="lo">
<span id="Blue">Blue</span>
</div>
</div>
</form>
<script>
$("input").click(function() {
$("span").css('background','white');
var id=$(":checked").val();
$('#'+id).css('background',id);
});
</script>
</body>
</html>
OUTPUT
This entry was posted on October 4, 2009 at 12:14 pm, and is filed under
Change background color on radio select,
JQuery,
JQuery Change background color based on radio button Click Event,
radio buttons background color change script
.You can leave a response, or trackback from your own site.